2

我是 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>

任何帮助是极大的赞赏。谢谢，

4

1 回答 1

5

行。上面的代码有很多问题：

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

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

于 2012-10-25T15:37:45.150 回答