loops in underscore js template

Question

Ok guys so I have this array of key pair values which I'm using as my model:

var acs = [{'label':'input box'},{'label':'text area'}]; 

the rest of the code goes as follows

var Action = Backbone.Model.extend({}); var action = new Action(acs); var ActionView = Backbone.View.extend({     tagName:"li",     template: _.template($('#actions-template').html()),     events:{         "click":"makeInput"     },     render:function(){         $(this.el).html(this.template(this.model.toJSON()));         $(".hero-unit>ul").append(this.el);         return this;     },     makeInput:function(){         alert("im in");     } }); var actionView = new ActionView({model:action}); actionView.render(); 

The question is with regards to the view. How can I loop through the model I'm passing if this is the view I want to have

<script type="text/template" id="actions-template"> <% _.each(action, function(acs) { %>      <a class="btn"><%= label %></a> <% }); %> </script> 

There is something wrong with my view and the loop I believe. Any clues? Thanks!

Answer 1

You'd probably want to do two things:

1. Adjust the data you supply to the template:

   $(this.el).html(this.template({     action: this.model.toJSON() })); 

2. Adjust the inner part of the template to use acs.label instead of label:

   <a class="btn"><%= acs.label %></a> 

Demo: http://jsfiddle.net/ambiguous/xczBy/

On second thought, I think you should be working with a collection rather than a single model. You'd want to add this:

var ActionCollection = Backbone.Collection.extend({     model: Action }); 

And then adjust render to use this.collection:

    $(this.el).html(this.template({         actions: this.collection.toJSON()     })); 

And then start things up like this:

var actions = new ActionCollection(acs); var actionView = new ActionView({collection: actions}); 

And finally, refer to actions in the template:

<% _.each(actions, function(acs) { %>  

Demo: http://jsfiddle.net/ambiguous/6VeXk/

This would better match Backbone's key/value based models.