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

Ok。上記のコードには多くの問題があります。

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.bindrender()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 に答える