0

私はBackbone.jsを初めて使用し、この単純な例を機能させようとしています。基本的に、jsFiddleでコードを実行すると、プロパティ「firstname」が定義されていないことがわかります。

フィドルへのリンクは次のとおりです：http： //jsfiddle.net/cpeele00/YjUBG/16/

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

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

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

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

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


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

var userView = new UserView({model: users});

userView.render();

</ p>

これを理解する助けをいただければ幸いです。

V / R

クリス

4

1 に答える 1

1

モデルは実際にはコレクションであるため、モデルを反復処理し、コレクション内の各モデルにテンプレートを適用する必要があります。1つの方法は、アンダースコア拡張機能を使用することCollection.eachです。

render: function() {
    // clear the view
    this.$el.empty();

    // save a reference to the view object
    var self = this;

    // iterate over the collection
    this.model.each(function(singleModel) {

        // render the model
        self.$el.append(self.template(singleModel.toJSON()));
    });

    return this;
}

これが更新されたフィドルです。

（必要に応じて、テンプレート自体にイテレーションを配置することもできますが、一般的には、テンプレートよりもコードをビューに保持する方が望ましいと思います。）

于 2012-12-22T23:36:31.153 に答える