Question

我正在尝试使用Backbone.js学习嵌套视图并遇到问题。不会抛出任何错误，但它不会显示任何输出或数据。任何帮助将非常感激。 V / R Chris

链接到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>

Answer 1

似乎有两个问题：

首先，UserItemView中的拼写错误：您没有使用模板，只是附加JSON。而不是

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

应该是

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

其次，UserListView没有附加到DOM的任何位置，因此当它被“渲染”时，它不会出现。我添加了

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

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

Forked Fiddle

_{PS， Firebug是你的朋友。}

Backbone.js嵌套视图不呈现数据

1 个答案: