Two-way Binders in Rivet.js

Question

I have created a binder in rivets.js which binds to multiple attributes of an element from the given model.As I want a single binder for a my model object in 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>

I have also binded the login model to UI page which I want the Dom updated as well.

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

And now I use a form with couple of input tags to modify the model which is not in current context, I mean I bind login.test1 to that form separately.

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

When I alter the input in above form inputs, the model gets changed and is reflected in login object . But same is not reflected in DOM or UI.

And If I take the same scenario and just bind a single attribute like below the flow works fine and any changes from input to model gets reflected in DOM.

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

Am I missing something ? Are such kind of binders with multiple bindings to attributes possible ? Is there any extra configuration I need to do ?

Answer 1

Since you are passing in the parent object of the two properties you are interested in, you would have to use a similar technique as with a computed property, described in the rivets.js manual . Like this:

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

This tells rivets to update your binder when either text or color changes.

working fiddle