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