0

Backbone.js でネストされたビューを学習しようとしていますが、問題が発生しました。エラーはスローされませんが、出力やデータは表示されません。どんな助けでも大歓迎です。V/R クリス

jsFiddle へのリンク: http://jsfiddle.net/cpeele00/PcmMW/8/

var User = Backbone.Model.extend({});

var Users = Backbone.Collection.extend({
    model: User
});

var UserItemView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#user-list-template').html()),
    render: function() {
        this.$el.html(this.model.toJSON());
        return this;
    }
});

var UserListView = Backbone.View.extend({

    render: function() {
        this.$el.empty();
        var self = this;
        this.collection.each(function(model) {
            self.renderItem(model);
        });
    },

    renderItem: function(item) {
        var itemView = new UserItemView({
            model: item
        });

        this.$el.append(itemView.render().el);
    }

});

var user1 = new User();
user1.set({
    firstname: 'momo',
    lastname: 'peele'
});

var user2 = new User();
user2.set({
    firstname: 'bobo',
    lastname: 'peele'
});

var users = new Users([user1, user2]);

var listView = new UserListView({
    collection: users
});
listView.render();

これがhtmlとテンプレートのマークアップです

<div id="user-list">
  <fieldset>
    <legend>Users</legend>
    <ul></uL>
  </fieldset>
</div>

<script id="user-list-template" type="text/template">
    <%= firstname %> 
    <%= lastname %> 
</script>
4

1 に答える 1

3

次の 2 つの問題があるようです。

まず、タイプミスUserItemView: テンプレートを使用しておらず、JSON を追加しているだけです。それ以外の

this.$el.html(this.model.toJSON());`

そのはず

this.$el.html(this.template(this.model.toJSON()));

次に、UserListViewは DOM のどこにも接続されていないため、「レンダリング」されても表示されません。追加した

el: $("#user-list ul")

これにより、レンダリングによってサブビュー項目が実際に DOM にある要素に追加されます。

フォークフィドル

PS、 Firebug はあなたの友達です。

于 2012-12-23T19:06:09.563 に答える