javascript - Underscore 模板未使用 Backbone.js 渲染数据未传递到模板

Question

我一直在试图弄清楚模板如何与模型和集合一起工作。教程的某些部分有意义，但其他部分则没有意义。所以我一直在 JSFiddle 中乱搞，试图让下面的例子工作。

我真正想做的就是构建几个对象。然后将它们输出到特定 div 中的表格中。

根据错误，几乎就像数据没有传递到模板中一样。根据我的理解，我正在做的事情应该有效。

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

尝试将 Notebook 设为 Backbone 集合，并使用集合 api 在 View 中进行迭代。还发布于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>