Iterate over a collection of Backbone.js models using Rivets.js?

Question

I'm using Rivets.js for two two-way data binding in a Backbone project and would like to implement iteration binding. The documentation suggests iteration binding is possible, but there are no examples available. I am using a simple Rails API to send JSON to the client and want to iterate over the contents. Has anyone had any success getting this functionality working in Rivets.js?

Reference material: Simple Example using Backbone.js and Rivets.js

jsFiddle here: http://jsfiddle.net/rhodee/3qcYQ/1/

From the Rivets.js site

Iteration Binding

Even though a binding routine for each-item will likely be included in Rivets.js, you can use the data-html binding along with a set of formatters in the interim to do sorting and iterative rendering of collections (amongst other cool things).

 <ul data-html="model.tags | sort | tagList"></ul> 

Answer 1

Expanding on this answer:

As of 0.3.2 there is now a data-each-[item] binding for exactly this purpose.

Note that you will need to specifically modify your Rivets adapter to work with a Backbone Collection, as the out-of-the-box examples on the Rivets.js site do not fly with this use case.

You'll need something like this in your rivets.configure({ adapter: ... }) :

...
read: function( obj, keypath ) {
    return obj instanceof Backbone.Collection 
       ? obj["models"] 
       : obj.get(keypath)
}

And the JS Fiddle: http://jsfiddle.net/tigertim719/fwhuf/70/

For bonus points, Collections embedded in Models will require additional handling in your adapter.

For more information, check this post on Rivets.js Github issues:
Binding to Backbone.Collection with the data-each- binding

Answer 2

As of 0.3.2 there is now a data-each-[item] binding for exactly this purpose.

<ul>
  <li data-each-todo="list.todos">
    <input type="checkbox" data-checked="todo.done">
    <span data-text="todo.summary"></span>
  </li>
<ul>

For previous versions of Rivets.js, the work-around that you've referred to is to implement the iterative rendering with a formatter — for example you would have a data-html binding with model.items | itemList model.items | itemList where the itemList formatter just loops over the array and returns some rendered HTML.

rivets.formatters.itemList = (array) ->
  ("<li>#{item.name}</li>" for item in array).join ''

Answer 3

UnderscoreJS is integrated in Backbone so you can use its native methods like _.each() or use the integrated Backbone Collection underscore methods .

Is it this what you are looking for?

Answer 4

cayuu's answer was correct. But the rivets.js reference in the fiddle was not working, so the result is not displaying.

Check out the version below to see the action.

http://jsfiddle.net/tigertim719/fwhuf/70/

rivets.configure({
  adapter: {
    subscribe: function(obj, keypath, callback) {
      obj.on('change:' + keypath, callback);
    },
    unsubscribe: function(obj, keypath, callback) {
      obj.off('change:' + keypath, callback);
    },
    read: function(obj, keypath) {
        return obj instanceof Backbone.Collection ? obj["models"] : obj.get(keypath);
    },
    publish: function(obj, keypath, value) {
      obj.set(keypath, value);
    }
  }
});

The most important part is

read: function(obj, keypath) {
            return obj instanceof Backbone.Collection ? obj["models"] : obj.get(keypath);
        },

That tells rivets how to read your collection and model from Backbone.