Question

我已经在服务器上有一些模型已经引导。它们正在获取并成功渲染。但是当我保存一个新模型时，我无法渲染它。当我重新加载页面时 - 一切正常：新添加的模型呈现。如何让它在飞行中呈现（不刷新页面）？

这是我的ListView

var GroupView = Backbone.View.extend({
    tagName: 'ul',

    initialize: function () {
        this.collection = new StudentsCollection();
        // this.collection.on('add', this.render, this);
        this.collection.on('update', this.render, this);
        // this.collection.on('reset', this.render, this);
        this.collection.fetch({
            success: function () {
                console.log('success!');
            },
            error: function (collection, response, options) {
                console.log(options);
            }
        });
    },

    render: function () {
        // this.$el.empty();
        var self = this;

        this.collection.each(function (student) {
            var studentView = new StudentView({
                model: student
            });
            self.$el.append(studentView.render().el);
        });
        $('.container').append(this.$el);
    }
});

我尝试添加＆＃39;集合上的活动，但这只是一切。有什么想法吗？

Answer 1

在收集时使用add是正确的做法，因为您想在添加模型时执行某些操作。您之所以看到所有内容的两倍（我怀疑除了最近添加的内容之外）的原因是因为您的渲染功能只是附加到$el。

Backbone在渲染之前不会清除你现有的视图，你必须决定使用什么策略。

最简单的解决方案是简单地添加this.$el.empty()和render的开头。我不建议这样做，因为每次添加模型时它都会重新渲染整个内容。

更好的解决方案是创建一个功能，仅将一个视图添加到现有视图并在add上触发。

喜欢以下

initialize: function() {
    ...
    this.collection.on('add', this.addStudentView, this);
    ...
}

和

addStudentView: function(model) {
    var studentView = new StudentView({
        model: model
    });
    this.$el.append(studentView.render().el);
}

添加新模型后渲染

1 个答案: