actualizar una vista Backbone cuando el modelo se guarda

Question

tengo el siguiente escenario -

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

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

tengo un modelo y la colección respectiva definida.

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

Las vistas anteriores crean un elemento de lista individual para cada modelo.

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

En WineView, cuando se hace clic en el botón Enviar del formulario, se guarda el modelo. La función Backbone.sync está anulada.

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

Mi preocupación es que, cuando el modelo se guarda el WineListView no llega renovado y mostrar el nuevo modelo que se ha agregado. Precisamente this.mode.bind ("add") no se invoca.

Pido disculpas por la verbosidad de la pregunta. Pero, esto me ha estado molestando por casi una semana. Cualquier ayuda es muy apreciada.

¡Salud!

Answer 1

la razón complemento no se llama nunca es exactamente eso una vez que su vino se guarda wine.save(); se debe añadir una función éxito y añadirlo a la colección carta de vinos

probar esto:

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

más información sobre la idea agregador evento mira esto:
Routing and the event aggregator coordinating views in backbone.js

Answer 2

Por lo que puedo ver, nunca estás realmente anuncio ding el nuevo modelo de la colección. Una manera fácil de hacer esto, sería el método de la colección create (asumiendo que haya realizado la colección está disponible):

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

A medida que la documentación indica

[l] a crear método puede aceptar una atributos hash o un objeto modelo no guardado existente.

la creación del nuevo modelo como éste, deben dar lugar a un evento adden la colección si no me equivoco.

Otra manera, que - (! De nuevo, en la colección, no el modelo) de acuerdo con los documentos definitivamente debe activar un evento add

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

Añadir un modelo (o una serie de modelos) a la colección. Activa un evento "agregar" , que puede pasar {silent: true} para suprimir.

En cualquier caso, recuerde que debe cambiar su acontecimiento de unión:

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