How to associate HTML selection with model value in Rivets.JS?

Question

I am trying to integrate Rivets.JS into my application. I get binding values ​​hanging for basic input formats and regular data on the page, but I can't figure out how to handle the garbage (down menu) using rivets.

I can create a selection with each tag, as in this JSFiddle: http://jsfiddle.net/eimajenthat/94ca1xht/

But I want to bind the selected value in the menu to the model value (in my Fiddle, I would bind truck.job_id to the selection).

Here is my JS:

$(document).ready(function(){ window.view = rivets.bind($('#contentWrap'),{ truck:{id:1,job_id:3}, jobs:[ {id:1,job_number:'thing1'}, {id:2,job_number:'thing2'}, {id:3,job_number:'thing3'}, {id:4,job_number:'thing4'}, ] }); }); 

Here is my HTML:

 <div id="contentWrap"> <select> <option rv-each-job="jobs" rv-value="job.id">{ job.job_number }</option> </select> </div> 

Bonus points: all the elements of choice in my application are supplemented by Chosen . This means that whenever I change the settings or the selection using JavaScript, I need to call an update for my favorites so that users can see it, for example:

 $('#my-select').trigger('liszt:updated'); 

How can I call the code above whenever the model used for the parameters (tasks in my script) is updated, or when the select value (trucks.job_id) is updated?

Answer 1

Well, that turned out pretty easy. I decided to remove the question, but maybe I'm not the only idiot trying to do this. Here is my updated Fiddle: http://jsfiddle.net/eimajenthat/94ca1xht/2/

Here's JS:

 $(document).ready(function(){ rivets.formatters.chosen = function(value,selector) { $(selector).val(value).trigger('liszt:updated'); return value; }; window.view = rivets.bind($('#contentWrap'),{ truck:{id:1,job_id:3}, jobs:[ {id:1,job_number:'thing1'}, {id:2,job_number:'thing2'}, {id:3,job_number:'thing3'}, {id:4,job_number:'thing4'}, ] }); $('#chosen-version').chosen(); }); 

Here's the HTML:

 <div id="contentWrap"> <select rv-value="truck.job_id"> <option rv-each-job="jobs" rv-value="job.id">{ job.job_number }</option> </select> <br/> <select id="chosen-version" rv-value="truck.job_id | chosen '#chosen-version'"> <option rv-each-job="jobs" rv-value="job.id">{ job.job_number }</option> </select> <p> { truck.job_id } </p> </div> 

Basically, I forgot that you can specify a value for <select> just like <input> . When I realized this, I tried it with rv-value , and that works too. From now on, it’s about the same as binding a text field.

Then there is the selected question. Just notice, my application uses an older version of Chosen, and I don’t want to update it because it works fine. I think an event trigger may have a different name. In any case, in order to refresh the selected Chosen menu, you must fire the refresh event every time the value of the original <select> updated. I did this a lot with jQuery, but never with Rivets since I just started using Rivets last night.

I needed a way to look at a variable and raise an update event in a variable change event. Shaking the Rivet documents, it looks like the adapters might fit the bill, as they seem to have monitoring capabilities, but when I burst in, I got a little embarrassed.

Then I started thinking about Fortter Rivets. They must be run every time the variable is updated to update the template. And that turns you into just functions that take a new value as a parameter and output a formatted version of the value. So, if you take a value and return it untouched, you have a small function that reliably executes when the variable is updated. You can put your undefined German event trigger right there, but first you need to manually update the original selection by calling jQuery val() , because you execute before the <select> really updated.

Formats also provide support for additional parameters, which is very convenient.

Pro Tip. Before you call rivets.bind() , you must declare formatting. Because.

Well, of course, I learned a lot. I think we will see if anyone else can win. Hurrah!