Вложенное представление Backbone.js не отображает данные

Я пытаюсь изучить вложенные представления с помощью Backbone.js и столкнулся с проблемой. Однако никаких ошибок не возникает, он не отображает никаких выходных данных или данных. Любая помощь приветствуется. В/Р Крис

ссылка на 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>

backbone.js backbone-views
person cpeele00    schedule 23.12.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Кажется, есть две проблемы:

Во-первых, опечатка в 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 — ваш друг.

person McGarnagle    schedule 23.12.2012
comment
Спасибо!! да, я использую отладчик Chrome для приложений, которые пишу, но мне не приходило в голову использовать его с jsFiddle. Еще раз спасибо и берегите себя! - person cpeele00; 24.12.2012