1

特定のモデルの要素の複数の属性にバインドする rivets.js にバインダーを作成しました。JavaScript でモデル オブジェクトに単一のバインダーが必要なためです。

//Model 
var login = {
         test1 : {text:"myData1",color:"myColor1"},
         test2 : {text:"myData2",color:"myColor2"}
        }

//My Custom Binder
rivets.binders.customize= function(el, value) {
  el.style.color = value.color;
  el.text = value.text;
}

//html
<a rv-customize='login.test1'></a>

また、Dom も更新する UI ページにログイン モデルをバインドしました。

//#myDOM => login
rivets.bind($('#myPage'), {login: login}) 

そして今、いくつかの入力タグを持つフォームを使用して、現在のコンテキストにないモデルを変更します。つまり、 login.test1をそのフォームに個別にバインドします。

//#myForm => login.test1
rivets.bind($('#myForm'), {model: login.test1}) 

//#myForm 
<form>
//...
<input rv-value='model.color' type='text'/>
<input rv-value='model.text' type='text'/>
//...
</form>

上記のフォーム入力の入力を変更すると、モデルが変更され、login オブジェクトに反映されます。しかし、それは DOM や UI には反映されません。

同じシナリオを使用して、以下のように単一の属性をバインドするだけで、フローは正常に機能し、入力からモデルへの変更は DOM に反映されます。

rivets.binders.color = function(el, value) {
  el.style.color = value
}

何か不足していますか?属性への複数のバインディングを持つそのような種類のバインダーは可能ですか? 必要な追加の構成はありますか?

4

1 に答える 1