Question

我有一个已经填充模型的集合，我需要使用另一个模型更新此集合并在页面上显示它（模型）。因此，按照文档，我在视图中从服务器获取模型：

this.collection.fetch(
{
    add: true,
    data: FILTER + '&page=' + (CURRENT_PAGE + 1),
    success: function(response){}
});

但是这个新模型没有显示在页面上，但是该集合获得了新模型。我想必须解雇一些集合方法，但事实并非如此。

提前抱歉，Backbone新手

观点：

    var EcoNatureCardInListView = Backbone.View.extend({
    tagName: 'tr',
    className: 'nature-card-tr',
    template: $('#natureCardsListTR').html(),
    render: function(){
        var tmpl = Handlebars.compile(this.template);
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
});
var EcoNatureCardsListView = Backbone.View.extend({
    el: $('#nature-cards-wrapper'),
    events: {
        "click a.short-eco-entity": "showFullEcoNatureCard",
        "click #add-cards": "addCardsOnPage"
    },
    initialize: function(){
        $("#nature-cards-list").html("");
        this.collection = new EcoNatureCardCollection();
        this.collection.fetch({
            success: function(response){}
        });
        this.collection.on('reset', this.render, this);
        this.collection.on('add', this.add, this);
    },
    render: function(){
        var that = this;
        _.each(this.collection.models, function(item){
            that.renderEcoNatureCard(item);
        }, this);
        $(addCards).show();
        $("#total-objects").text(TOTAL_OBJECTS);
        $("#filtered-objects").text(FILTERED_OBJECTS);
        if (this.collection.length < 20){
            $(addCards).hide();
        }
    },
    renderEcoNatureCard: function(item){
        var ecoNatureCardInListView = new EcoNatureCardInListView({
            model: item
        });
        $('#nature-cards-list').append(ecoNatureCardInListView.render().el);
    },
    showFullEcoNatureCard: function(e){
        var _id = $(e.currentTarget).attr('value');
        var natureCard = ecoNatureCardsListView.collection.where({ _id: _id })[0];
        if (typeof(fullEcoNatureCardView) === 'undefined'){
            fullEcoNatureCardView = new FullEcoNatureCardView(natureCard);
        } else {
            fullEcoNatureCardView.initialize(natureCard);
        }
    },
    addCardsOnPage: function(){
        this.collection.fetch({
            add: true,
            data: FILTER + '&page=' + (CURRENT_PAGE + 1),
            success: function(response){}
        });
    },
    filterDocs: function(FILTER){
        $("#nature-cards-list").html("");
        //$(loading).show();
        this.collection.fetch({
            data: FILTER,
            success: function(response){}
        });
    }
});

P.S。版本0.9.2

Answer 1

我认为您的问题是您的视图只订阅了Collection的“reset”事件，当您使用add：true选项调用fetch时，不会触发该事件。在这种情况下，它只会触发“添加”事件，因此您也需要听取它。我通常做的是我有

this.collection.on('reset', this.render, this);
this.collection.on('add', this.renderEcoNatureCard, this);

在我视图的初始化函数中，视图的render函数为集合的每个模型调用add函数。

P.S。：使用Backbone 0.9.2我认为你必须使用.on（...），因为listenTo还没有。

Answer 2

您需要在更改集合时进行渲染。我从未使用reset所以我不确定它什么时候被解雇。

更改

this.collection.on('reset', this.render, this);`

到

this.listenTo(this.collection,'add remove',this.render);

尽量不要将on(..)用于视图。否则，您必须在删除视图时致电off(..)。当您使用listenTo时，View会在事件被删除时进行删除。

修改

使用Underscore.js时，您不必声明对this的本地引用。

变化：

var that = this; _.each(this.collection.models, function(item){ that.renderEcoNatureCard(item); }, this);

要：

_.each(this.collection.models, function(item){ this.renderEcoNatureCard(item); }, this);

在Underscore.js中使用回调时，函数引用后的参数为context。这是函数将被执行的对象空间。你总是告诉它使用this来运行函数。

骨架提取然后渲染模型

2 个答案: