Rivet.js中的双向粘合剂

Question

我已经在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> 

我也登录模型绑定到UI页面，我也想更新Dom。

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

当我改变上述形式输入的输入，模型得到改变，并反映在登录对象。但是在DOM或UI中不会反映出来。

如果我采用相同的场景，只需绑定下面的单个属性，则流程正常工作，并且从输入到模型的任何更改都会反映在DOM中。

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

我错过了什么吗？这种类型的绑定器可以绑定多个属性吗？我需要做什么额外的配置？

Answer 1

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

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

这会告诉铆钉在文字或颜色发生变化时更新活页夹。

working fiddle