Vista parcial de la networking troncal que no muestra el último model

Soy relativamente nuevo en Backbone y me encuentro con este problema.

Estoy usando Backbone con DustJS

Mi plantilla se ve así: index.dust

 <div id="parentView"> <div class="section"> {>"app/inc/responseMessage" /} <div class="userDetails"> {! A button to get user details !} </div> </div> </div> 

Este es mi parcial a continuación – responseMessage.dust

 <div id="responseMessage"> {@eq key="{data.success}" value="true"} <div class="alert alert-success success" role="alert">success</div> {/eq} </div> 

Mi JS se ve así

 initialize: function() { this.responseMessageView = this.responseMessageView || new ResponseMessageView({ model: new Backbone.Model() }); // View is for the partial this.model = this.model || new Backbone.Model(); //View for the whole page }, 

Debajo se llama a la function cuando ocurre un evento y hace un POST y regresa con éxito.

 primaryViewEventTrigger: function(event){ //Button click on `index.dust` triggers this event and does a POST event to the backend this.listenToOnce(this.model, 'sync', this.primaryViewSuccess);//this will render the whole view. this.listenToOnce(this.model, 'error', this.primaryViewError); this.model.save({data: {x:'123'}}); } responseViewEventTrigger: function(event){ //Button click on `responseMessage.dust` triggers this event and does a POST event to the backend this.listenToOnce(this.responseMessageView.model, 'sync', this.responseViewSuccess);//it should only render the partial view - responseMessage.dust this.listenToOnce(this.responseMessageView.model, 'error', this.primaryViewError); this.responseMessageView.model.save({data: {x:'123'}}); } primaryViewSuccess: function(model,response){ this.model.set('data', response.data); this.render(); } responseViewSuccess: function(model,response){ this.responseMessageView.model.set('data', response.data); console.log(this.responseMessageView.model); this.responseMessageView.render(); // Does not work in some cases } 

Mis implementaciones de la function de callback

 exports.sendEmail = function sendEmail(req, res){ req.model.data.success = true; responseRender.handleResponse(null, req, res); }; 

this.model pertenece al model de la página completa. Mientras que this.responseMessageView.model es el model para el parcial.

Pregunta: Esto funciona perfectamente bien en la mayoría de los casos. Hay un caso en el que no representa el parcial con los últimos valores de model. Cuando hago clic en el button en index.dust y primaryViewSuccess se ejecuta. Después de lo cual hago clic en otro button y disparo responseViewEventTrigger . Hace el POST con éxito y se trata de responseViewSuccess y también lo almacena en el model. Pero no lo muestra en la interfaz. data.success aún no es verdadero, mientras que console.log(this.responseMessageView.model) muestra que attributes->data->success = true

Pero el mismo comportamiento cuando actualizo la página funciona perfectamente. Es solo eso cuando se llama a primaryViewSuccess y luego responseViewSuccess no toma los últimos cambios de model. En otras palabras, el model se está actualizando pero el DOM sigue siendo el mismo.

¿Que me estoy perdiendo aqui? ¡Gracias por tu time!

Estás accediendo al clásico Backbone render-with-subviews gotcha: cuando renderizas la vista de índice, estás reemplazando todos los nodos DOM. Eso incluye el nodo DOM al que está vinculada su instancia de responseMessageView . Si inspecciona el responseMessageView.el , verá que se actualizó con los datos del nuevo model, pero el elemento ya no está adjunto al tree DOM del índice.

 var Parent = Backbone.View.extend({ template: _.template(''), render: function() { this.$el.html(this.template()); }, initialize: function() { this.render(); this.child = new Child(); this.$el.append(child.el); } }); 

Aquí, cuando llame manualmente a renderizar, child.el ya no estará en parent.el (puede verificar usando el inspector).

La solución más simple aquí es llamar a child.setElement después de que el padre child.setElement con el elemento div#responseMessage recién renderizado. La mejor solución es separar el elemento responseMessageView antemano, y volver a conectarlo después:

 var Parent = Backbone.View.extend({ render: function() { this.responseMessageView.$el.detach(); this.$el.html(this.template(this.model.toJSON())); this.$el.find('#responseMessage').replaceWith(this.responseMessageView.el); } }); 

Intenta utilizar la callback correcta y avísame. Creo que tu problema puede provenir de aquí:

this.model.save ({att1: "value"}, {success: handler1, error: handler2});

¿También estás seguro de que quieres usar listenToOnce? en lugar de listenTo?

Intenta hacer this.delegateEvents() después de tu render ( http://backbonejs.org/#View-delegateEvents ).