Underscore Template isn't rendering with Backbone.js Data isn't being passed to template

Question

I have been trying to figure out how templates work along with models and collections. Parts of tutorials make sense, but other parts don't. So I have been messing in JSFiddle trying to get the following example to work.

All I really am trying to do is build a couple of objects. Then output them into a table in a specific div.

Based on the error it is almost as if the data isn't getting passed into the template. From my understanding what I am doing should work.

 var Note = Backbone.Model.extend({ defaults : { title: "", description: "" } }); var note1 = new Note({title: "Patience", description: "Something we all need"}); var note2 = new Note({title: "Fun Times", description: "All the things"}); var Notebook = Backbone.Model.extend({ model: Note }); notes = new Notebook([note1, note2]); var NoteView = Backbone.View.extend({ el: '.content', initialize: function() { alert("hello"); this.render(); }, render: function () { var template = _.template($('#notes-templates').html(), {notes: notes.models}); this.$el.html(template); } }); new NoteView(); 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> <div class="content"> </div> <script type="text/template" id="notes-templates"> <table> <thead> <tr> <th>title</th> <th>scripture</th> </tr> </thead> <tbody> <% _.each(notes, function(note) { %> <tr> <td><%= note.get('title') %></td> <td><%= note.get('description') %></td> </tr> <% }); %> </tbody> </table> </script> 

Answer 1

Try making Notebook a Backbone collection and using the collection api to iterate in the view. Also posted at http://jsfiddle.net/rossta/vn8hh5o7/2/

 var Note = Backbone.Model.extend({ defaults : { title: "", description: "" } }); var note1 = new Note({title: "Patience", description: "Something we all need"}); var note2 = new Note({title: "Fun Times", description: "All the things"}); var Notebook = Backbone.Collection.extend({ model: Note }); notes = new Notebook([note1, note2]); var NoteView = Backbone.View.extend({ el: '.content', initialize: function() { alert("hello"); this.render(); }, render: function () { var template = _.template($('#notes-templates').html(), {notes: notes}); this.$el.html(template); } }); new NoteView(); 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> <div class="content"> </div> <script type="text/template" id="notes-templates"> <table> <thead> <tr> <th>title</th> <th>scripture</th> </tr> </thead> <tbody> <% notes.forEach(function(note) { %> <tr> <td><%= note.get('title') %></td> <td><%= note.get('description') %></td> </tr> <% }); %> </tbody> </table> </script>