Sammlung hinzufügen Ereignis Listener in Backbone

Question

Ich versuche, meine Ansicht zu aktualisieren, wenn ich ein neues Modell zu meiner Sammlung hinzufügen. Meine erste Frage ist kann ich automatisch ein Modell zu meiner Sammlung hinzufügen, wenn ich das Modell speichern, wie:

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


}); 

oder muss ich noch Collection.add()

Andere zu tun, als zu sehen, dass die neues Modell aus meiner Sicht ich versuche, ein ‚hinzufügen‘ Ereignis-Listener wie folgt hinzuzufügen: das ist nicht nur nicht funktioniert,

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

aber wenn ich die Methode initialize hinzufügen, es Duplikate einfach alles in meinem Modell, wenn die Seite wird zuerst geladen.

Answer 1

Nope .. Wenn Sie ein model.save tun, es wird nur ein Zombie-Modell erstellen (wenn es nicht bereits ein Teil der Sammlung .i.e Wenn ein neues Modell gespeichert wird), die kein Teil einer Sammlung ist.

So Ihr hinzufügen Ereignis wird nicht für die Sammlung ausgelöst werden.

Wenn Sie das Add Ereignis wollen ausgelöst werden, Verwenden Sie die create Methode der Sammlung, die dann wissen, auf welcher Sammlung das neue Modell hinzugefügt werden muss ..

collection.create({model}); 

dann wäre es fügen intern das Modell auf die Sammlung und feuern die add event

auch ist es eine bessere Idee ist listenTo statt Anbringen Ereignisse zu verwenden on

mit

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