Backbone.js 和渲染表

Question

我是 Backbone.js 的新手，我遇到了一个真正的问题。我想列出成员的名字和姓氏并将它们放在一个表中。由于某些原因，我遗漏了一个重要的点并且它不起作用。我的代码:

var members = Backbone.Model.extend({
    urlRoot: "/get_members",
});

var member_collection = Backbone.Collection.extend({
    model : members,
    url : "/get_members",
});

var member_list_view = Backbone.View.extend({
    el : $('#members'),
    initialize : function() {
        this.collection.bind("add", this.render, this);
    },

    render: function() {
        var $tbody = this.$("tbody");
        _.each(this.model.models, function(data) {
            this.$el.append(new member_view({model : data}).render().el);
        }, this);
        return this;
    }
});

var member_view = Backbone.View.extend({
    tagName : "tr",
    template : _.template($("#member-template").html()),

    render : function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});



var router = Backbone.Router.extend({
    routes : {"members" : "member_router"},
    member_router : function() {
        var member_colls = new member_collection();
        var member_viewer = new member_list_view({collection : member_colls});
        member_colls.fetch();
    }
});

我的 HTML:

<script type="text/template" id="member-template">
<table id="members">
  <thead>
    <tr><td>Firstname</td><td>Lastname</td></tr>
  </thead>
  <tbody>
    <tr><td><%= firstname %></td><td><%= lastname %></td></tr>
  </tbody>
</table>
</script>

非常感谢任何帮助。谢谢，

Answer 1

好的。上面的代码有很多问题:

1) 模板member-template

您为 member_view 使用成员模板，但它包含整个表而不仅仅是成员行。你的模板应该是这样的:

<script type="text/template" id="member-template">
    <td><%= firstname %></td><td><%= lastname %></td>
</script>​

2) member_list_view 有 this.collection.bind 而 render() 使用 this.model.models

你应该保持一致:

var member_list_view = Backbone.View.extend({
    el : $('#members'),
    initialize : function() {
        this.model.bind("add", this.render, this);
    },

    render: function() {
        _.each(this.model.models, function(data) {
            this.$el.append(new member_view({model : data}).render().el);
        }, this);
        return this;
    }
});

要获得代码的完整工作版本，take a look at this JSFiddle