下劃線模板不與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骨幹收集和使用收集API中的視圖進行迭代。張貼於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>