Undercore模板不是't使用Backbone.js进行渲染数据不是't传递到模板

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

本文关键字：数据 使用 Undercore Backbone js      更新时间：2023-09-26

我一直在努力弄清楚模板如何与模型和集合协同工作。教程的某些部分是有意义的，但其他部分则不然。所以我一直在搞JSFiddle，试图让下面的例子发挥作用。

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

根据这个错误，数据几乎没有被传递到模板中。根据我的理解，我所做的应该是有效的。

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>

尝试将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>

相关文章：