Search code examples
javascriptcoffeescriptrivets.js

Iterating through models for a select field with Rivet.js & Coffeescript

I'm attempting to populate a select field with options using bootstrapped data. I'm encountering an issue when binding my array of models to the jQuery select object...

The HTML

<select data-each-project="projects" id="project-selection">
    <option data-value="project:description"></option>
</select>

The Binding

project_array = new Array()

_.each projects, (project) ->
    projects_array.push project

rivets.bind @el.select, projects:projects_array

The Result

I receive an error indicating that the object has no .on method -> which it doesn't because it is an array of models not a model it self...

How should this really be done? Thanks!

Solution

  • When you subscribe to an iteration binding rivets does two things:

    1. Subscribes to the entire array so if it changes it will rerun the iteration
    2. Subscribe to all children of the array that need binding

    Rivets isn't subscribing to your children because you are not using any bindings that require it.

    project:description = non-subscribe binding

    project.description = subscribe binding

    If you don't want to subscribe to array changes (I think that's what you're asking for) you can do data-each-project=":projects"