javascript - 主干提取然后渲染模型

Question

我有一个已经充满模型的集合，我需要用一个模型更新这个集合并在页面上显示它(模型)。因此，按照文档，我在 View 中从服务器获取模型:

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

但是这个新模型并没有出现在页面上，但是集合得到了新模型。我想必须触发集合的某些方法，但事实并非如此。

提前抱歉，Backbone 的新手)

View :

    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){}
        });
    }
});

附言版本 0.9.2

Answer 1

我认为您的问题是您的 View 只订阅了集合的“重置”事件，当您使用 add:true 选项调用 fetch 时不会触发该事件。在这种情况下，它只会触发一个“添加”事件，因此您也需要收听它。我通常做的是我有

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

在我的 View 的初始化函数中， View 的渲染函数为集合的每个模型调用添加函数。

P.S.:对于 Backbone 0.9.2，我认为您必须使用 .on(...)，因为 listenTo 还不存在。