1

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 ?

Ramkrishna Sharma
  • 6,961
  • 3
  • 42
  • 51
damitj07
  • 2,689
  • 1
  • 21
  • 40

1 Answers1

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

David784
  • 7,031
  • 2
  • 22
  • 29
  • I just checked it (firefox), and still seems to be working perfectly. If I change input color to blue, the anchor tag changes to blue, and if I change the text input, it changes the text. What browser are you using, and are you getting any console errors? – David784 Apr 01 '16 at 14:10
  • Okay, found the issue. In firefox it was working fine, but in chrome it was giving `Refused to execute script from 'https://raw.githubusercontent.com/.../rivets.bundled.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.` Solution (from this [question](https://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github/18049842#18049842) was to change to `https://cdn.rawgit.com/...`. Should be working now. – David784 Apr 01 '16 at 14:17