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>

當我更改上述表單輸入中的輸入時，模型會更改並反映在login object 中。 但同樣沒有反映在 DOM 或 UI 中。

如果我采用相同的場景並且只綁定一個像下面這樣的單個屬性，那么流程工作正常，從輸入到模型的任何更改都會反映在 DOM 中。

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

我錯過了什么嗎？ 這種具有多個屬性綁定的綁定器是否可能？ 我需要做任何額外的配置嗎？

Answer 1

由於您傳入的是您感興趣的兩個屬性的父對象，因此您必須使用與計算屬性類似的技術，如 rivets.js手冊中所述。 像這樣：

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

這會告訴鉚釘在文本或顏色發生變化時更新您的活頁夾。

工作小提琴