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)Temaplate 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;
    }
});

有关代码的完整工作版本,请查看此JSFiddle