特定のモデルの要素の複数の属性にバインドする 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
}
何か不足していますか?属性への複数のバインディングを持つそのような種類のバインダーは可能ですか? 必要な追加の構成はありますか?