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

对于代码的完整工作版本，take a look at this JSFiddle

Backbone.js和渲染表

1 个答案: