javascript - Collection 在 Backbone 中添加事件监听器

Question

每当我向我的收藏中添加新模型时，我都会尝试更新我的 View 。我的第一个问题是，当我保存模型时，我是否会自动将模型添加到我的收藏中，例如:

PostsApp.Views.Form = Backbone.View.extend({
    template: _.template($('#form-template').html()),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
    },
    events:{
        'click button' : 'save'
    },

    save: function(e){
        console.log("is this working");
        e.preventDefault();
        var newname = this.$('input[name=name-input]').val();
        var newadress = this.$('input[name=adress-input]').val();
        this.model.save({name: newname, adress : newadress});
    }


});

还是我还需要做 collection.add()

除了在我的 View 中看到新模型之外，我正在尝试添加一个“添加”事件监听器，如下所示:

PostsApp.Views.Posts = Backbone.View.extend({
    initialize: function(){
        this.collection.on('add', this.addOne, this);

    },
    render: function(){
        this.collection.forEach(this.addOne, this);
    },

    addOne: function(post){
        var postView = new PostsApp.Views.Post({model:post});
        postView.render();
        this.$el.append(postView.el);
    }
});

这不仅不起作用，而且当我添加初始化方法时，它只会在首次加载页面时复制模型中的所有内容。

Answer 1

不.. 当你执行 model.save 时，它只会创建一个僵尸模型(如果它还不是集合的一部分。即如果一个新的模型已保存)，它不是任何集合的一部分。

因此您的添加事件不会为该集合触发。

如果你想触发add事件，使用collection的create方法，然后它会知道新模型必须添加到哪个collection..

collection.create({model});

然后它会在内部将模型添加到集合中并触发 add 事件

此外，使用 listenTo 而不是使用 on 附加事件是一个更好的主意

this.listenTo(this.collection, 'add', this.addOne);

代码

PostsApp.Views.Form = Backbone.View.extend({
    template: _.template($('#form-template').html()),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
    },
    events: {
        'click button': 'save'
    },

    save: function (e) {
        console.log("is this working");
        e.preventDefault();
        var newname = this.$('input[name=name-input]').val();
        var newadress = this.$('input[name=adress-input]').val();
        this.collection.create({
            name: newname,
            adress: newadress
        });
    }
});

PostsApp.Views.Posts = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.collection, 'add', this.addOne);

    },
    render: function () {
        this.collection.forEach(this.addOne, this);
    },

    addOne: function (post) {
        var postView = new PostsApp.Views.Post({
            model: post,
            collection : this.collection
        });
        postView.render();
        this.$el.append(postView.el);
    }
});