javascript - Rivet.js中的双向绑定(bind)器

我在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 object中。但是在DOM或UI中却没有体现出来。

而且，如果我采用相同的情况，并且只绑定一个属性，例如下面的流程，则工作正常，并且从输入到模型的任何更改都将反映在DOM中。

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

我想念什么吗？这种对属性具有多个绑定的绑定器是否可行？有什么需要做的额外配置吗？

最佳答案

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

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

这告诉铆钉在文本或颜色更改时更新您的活页夹。

working fiddle

关于javascript - Rivet.js中的双向绑定(bind)器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36259312/