javascript - Rivet.js 中的双向 Binder

Question

我在 rivets.js 中创建了一个 Binder ，它绑定(bind)到给定模型中元素的多个属性。因为我想要为 JavaScript 中的模型对象创建一个 Binder 。

//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>

我还将登录模型绑定(bind)到 UI 页面，我也希望 Dom 更新。

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

现在我使用带有几个输入标签的表单来修改不在当前上下文中的模型，我的意思是我将 login.test1 单独绑定(bind)到该表单。

//#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>

当我更改上述表单输入中的输入时，模型会发生更改并反射(reflect)在 登录对象 中。但同样的情况并没有反射(reflect)在 DOM 或 UI 中。

如果我采用相同的场景并只绑定(bind)一个属性(如下所示)，则流程可以正常工作，并且从输入到模型的任何更改都会反射(reflect)在 DOM 中。

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

我错过了什么吗？这种具有多个属性绑定(bind)的绑定(bind)器是否可能？我需要做任何额外的配置吗？

Answer 1

由于您要传递您感兴趣的两个属性的父对象，因此您必须使用与计算属性类似的技术，如 rivets.js manual 中所述。 。像这样:

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

这会告诉铆钉在文本或颜色发生变化时更新 Binder 。

working fiddle