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

似乎有两个问题：

首先，输入错误UserItemView：您没有使用模板，只是附加了 JSON。代替

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

它应该是

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

其次，UserListView它不会在任何地方附加到 DOM，因此当它被“渲染”时，它不会出现。我添加了

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

到视图，以便渲染将子视图项附加到实际在 DOM 中的元素。

分叉的小提琴

PS，萤火虫是你的朋友。

于 2012-12-23T19:06:09.563 回答