CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.js
Buddy Lindsey
Buddy Lindsey

Reputation: 3630

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

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>

Upvotes: 0

Views: 103

Answers (1)

rossta
rossta

Reputation: 11494

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>

Upvotes: 1

Related Questions