プレーンjsを使用して値を更新するオブジェクトをバインドする方法はありますか？

Question

私は名前の値を持つオブジェクトを持っています。その値をhtml要素にバインドすることは可能ですか？ - like angularjs

もしそうなら、正しい方法は何ですか？それとも不可能なのでしょうか？最初から

var ob = {}; 
 

 
ob.name = "Testing"; 
 

 
$('div').text(ob.name); 
 

 
$('button').on('click', function(){ 
 

 
\t ob.name = "Update Name"; 
 
    
 
    console.log(ob.name) //name updates 
 

 
})

button{ 
 
    border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <h1></h1> <!-- on click nothing updates automatically --> 
 
</div> 
 
<button>Click Here</button>

Answer 1

をイベントリスナを実装する意味します。

何ができますが、プロパティに書き込む際のコードはHTMLのノードを更新するようにプロパティでHTMLノードとJavaScriptオブジェクトを作成します

var d = document.createElement("div"); 
document.body.appendChild(d); 
var obj = {get value() { return d.textContent; }, 
      set value(x) { d.textContent = x; }}; 
obj.value = "foo"; // Will also update d content 

注意ニーズを書くことができますプロパティこと上記のデータを格納する場所...私は直接d.textContentを使用したので、2つは実際に同期されています（obj.valueはDOMノードを変更し、逆も同様です）。

Answer 2

JavaScriptを自身のdoesntサポートbidirectionalBinding：

は、ここに私のデモです。

あなたの例を動作させるには、正しいことをすでに把握している式をonClickFunctionに追加するだけです。

var ob = {}; 
 

 
ob.name = "Testing"; 
 
$('div').text(ob.name); 
 

 

 
$('button').on('click', function(){ 
 

 
\t ob.name = "Update Name"; 
 
     $('div').text(ob.name); <!-- add here --> 
 
    
 
    console.log(ob.name) //name updates 
 

 
})

button{ 
 
    border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <h1></h1> 
 
</div> 
 
<button>Click Here</button>

だけ明確にします！ をbidirectionalBindingと呼ぶことができるものを実装することは可能ですが、あなたが何をしたいのではないのですか？ プレーンなjavascript！それはJavascriptが読み取りや書き込みがユーザー定義のコードを実行することができ、オブジェクト「プロパティ」を作成することができますあなたの textValueなどに