Aktualizacja widok Backbone gdy model jest zapisywany

Question

Mam następujący scenariusz -

window.Wine = Backbone.Model.extend({ 
    urlRoot: '/wines' 

}); 
window.WineCollection = Backbone.Collection.extend({ 
    model: Wine, 
    url: "/wines" 
}); 

Mam model i odpowiedni zbiór zdefiniowany.

window.WineListView = Backbone.View.extend({ 
    el: '#wineList', 
    initialize: function() { 
     this.model.bind("reset", this.render, this); 
     this.model.bind("add", function (wine) { 
      alert("model added"); 
     }); 
    }, 
    render: function (eventName) { 
     _.each(this.model.models, function (wine) { 
      $(this.el).append(new WineListItemView({ 
       model: wine 
      }).render().el); 
     }, this); 
     return this; 
    } 
}); 
window.WineListItemView = Backbone.View.extend({ 
    tagName: "li", 
    initiliaze: function() { 
     this.render(); 
    }, 
    render: function (eventName) { 
     var template = _.template($('#wine-list-item').html()); 
     $(this.el).html(template(this.model.toJSON())); 
     return this; 
    } 
}); 

Powyższe widoki tworzą indywidualny element listy dla każdego modelu.

window.WineView = Backbone.View.extend({ 
    el: $("#mainArea"), 
    initialize: function() { 
     this.render(); 
    }, 
    render: function (eventName) { 
     var template = _.template($("#wine-details").html(), {}); 
     $(this.el).html(template); 
    }, 
    events: { 
     "click #save_form": "save_form" 
    }, 
    save_form: function() { 
     var wine = new Wine(); 
     wine.save(); 
     return false; 
    } 
}); 
window.HeaderView = Backbone.View.extend({ 
    el: '.header', 
    initialize: function() { 
     this.render(); 
    }, 
    render: function (eventName) { 
     var template = _.template($('#header').html()); 
     $(this.el).html(template()); 
     return this; 
    }, 
    events: { 
     "click .new": "newWine" 
    }, 
    newWine: function (event) { 
     var wine_View = new WineView(); 
     wine_View.render(); 
    } 
}); 

W WineView, po kliknięciu przycisku Wyślij formularza model zostaje zapisany. Funkcja Backbone.sync jest nadpisana.

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "": "list" 
    }, 
    list: function() { 
     this.wineList = new WineCollection(); 
     this.wineListView = new WineListView({ 
      model: this.wineList 
     }); 
     this.wineList.fetch(); 
    } 
}); 
var app = new AppRouter(); 
Backbone.history.start(); 
var header = new HeaderView(); 

Moim problemem jest, gdy model jest zapisany WineListView nie dostać odświeżony i pokazać nowy model, który został dodany. Precyzyjnie thismode.bind ("add") nie jest wywoływany.

Przepraszam za szczegółowość pytania. Ale to przeszkadza mi przez prawie tydzień. Każda pomoc jest bardzo doceniana.

Pozdrawiam!

Answer 1

powodem dodatek nigdy nie jest wywoływana jest dokładnie to raz twoja wina jest zapisany wine.save(); należy dodać funkcję sukces i dodać go do kolekcji winelist

spróbuj tego:

wine.save(wine.toJSON(), { 
    success: function(){ 
     // model was saved successfully, now add it to the collection 
     yourwinelist.add(wine); 
     // if you can't access your wine list from this context, you might want to raise an event, and pass the wine, to catch it somewhere else: 
     obj.trigger('myWineAdded', wine); // this can be raised on a global event aggregator 
    }, 
    error: function(){ 
     // handle app when saving to server fails 
     alert('failed to save wine'); 
    } 
}); 

więcej informacji na Pomysł agregatora zdarzeń jest następujący:
Routing and the event aggregator coordinating views in backbone.js

Answer 2

Z tego, co widzę, nigdy nie jest tak naprawdę reklama ding nowy model do kolekcji. Łatwym sposobem, aby to zrobić, byłoby create metoda kolekcji użytkownika (zakładając dokonaniu kolekcji dostępne):

save_form: function() { 
    this.collection.create({ MODEL ATTRIBUTES HERE … }); 
    return false; 
} 

Jako dokumentacja stwierdza

[T] on tworzyć metoda może zaakceptować OSOBĄ atrybut hash lub istniejący niezapisany obiekt modelu.

tworzenia nowego modelu takiego, ma wyzwalać add zdarzenie sprawie zbierania jeśli się nie mylę.

Innym sposobem, który - (! Znowu na zbiórki nie modelu) według docs zdecydowanie powinien wyzwolić zdarzenie add

save_form: function() { 
    var wine = new Wine(); 
    this.collection.add(wine); 
    return false; 
} 

Dodaj model (lub tablicę modelach) do kolekcji. Wywołuje zdarzenie "dodaj" , które można przekazać {cichy: true} w celu stłumienia.

W każdym razie należy pamiętać, aby zmienić to wydarzenie wiążące:

this.collection.bind("add", function (wine) { 
    alert("model added"); 
});