jQuery 集合在 Backbone 中添加事件监听器

Collection add event listener in Backbone

提问by Gorkem Yurtseven

I am trying to update my view whenever I add a new model to my collection. My first question is do I automatically add a model to my collection when I save that model, like:

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

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


});

or do I still have to do collection.add()

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

Other than that to see the new model in my view I am trying to add an 'add' event listener like this:

除此之外，要在我的视图中查看新模型，我正在尝试添加一个“添加”事件侦听器，如下所示：

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

This not only doesnt work, but when I add the initialize method, it just duplicates everything in my model when the page is first loaded.

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

回答by Sushanth --

Nope.. When you do a model.save, it will just create a zombie model ( If it not already a part of the collection .i.e If a New model is saved) which is not a part of any collection.

不.. 当你做 a 时model.save，它只会创建一个僵尸模型（如果它不是集合的一部分。即如果保存了一个新模型），它不是任何集合的一部分。

So your add event will not be triggered for the collection.

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

If you want the add event to be triggered, Use the createmethod of collection , which then will know on which collection the new model has to be added..

如果要触发添加事件，请使用createcollection的方法，然后它将知道必须将新模型添加到哪个集合上..

collection.create({model});

Then it would internally add the model to the collection and fire the add event

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

Also it is a better idea to use listenToinstead of attaching events using on

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

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

Code

代码

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