Las vistas no tienen un estado propiamente tal. Más bien dependen de un modelo y lo que dibujan debiese ser obtenido de las propiedades del modelo. Como el modelo sí tiene un estado, cualquier mutación que quieras persistir debes hacerla sobre el modelo.
Antes de responder, voy a cambiarle nombre a tus variables:
vista1
se llamará vistaPadre
- Su constructor se llama
VistaPadreView
vista2
se llamará vistaHija
- Su constructor se llama
VistaHijaView
Si quieres que vistaHija
tenga un estado, debes pasarle un modelo:
var Modelo1 = Backbone.Model.extend();
var VistaPadreView = new Backbone.View.extend();
var vistaPadre = new VistaPadreView({
model: new Modelo1()
});
vistaPadre.render();
Ahora dices que la vistaHija
es instanciada desde la vistaPadre
. Esta segunda vista también debiera tener un modelo subyacente como para ejecutar un fetch
sobre éste y así refrescar sus datos. Según la descripción de tu pregunta, la vistaHija
hace un request que tú mismo has armado tal vez usando jQuery.ajax
.
Lo que debieras hacer, en cambio, es declarar un modelo subyacente para la vistaHija
. Ese modelo debiera tener como atributo urlRoot
el endpoint hacia donde quieres consultar los detalles del registro:
var Modelo2= new Backbone.Model.extend({
urlRoot: '/buscaregistro/';
});
De esa manera, al llamar a fetch
dentro de Modelo2
, si éste tiene un atributo id
, se ejecutará una llamada ajax a /buscaregistro/<id>
.
Dentro de la vistaHija
debes tener asociado un evento a la acción de traerse los datos, obteniendo lo que quieres buscar (por ejemplo) mediante el valor de un input con id #busqueda
. Por ejemplo:
var VistaHijaView = new Backbone.View.Extend({
events: {
'click .buscar': 'gatillaBuscar'
},
gatillaBuscar: function() {
this.model.set('id', this.$('#busqueda').value());
this.model.fetch().then(function(respuesta) {
...la respuesta contiene los detalles del registro...
})
}
});
var vistaHija = new VistaHijaView({
model: new Modelo2()
});
vistaHija.render();
Entonces, supongamos que la vistaPadre
instancia a la vistaHija
, y desde ésta el usuario puede buscar un registro mediante su id y obtener los detalles para éste y pasárselos a la vistaPadre
. Lo correcto en realidad sería pasarle los detalles a la instancia de Modelo1
y reinstanciar vistaPadre
pasándole este modelo, que ahora tiene sus propiedades anteriores más las que acabas de fijar dentro de vistaHija
.
Ahora, para que vistaHija
pueda modificar la instancia de Modelo1
tendría que tener una referencia a éste. Esta referencia se la puedes pasar al instanciarla desde vistaPadre
.
Redefinamos entonces vistaPadre
añadiéndole un evento que instancie y renderee la vistaHija
pasándole no sólo la instancia de Modelo2
sino la instancia de Modelo1
en los attributes
.
var VistaPadreView=Backbone.View.extend({
events: {
'click #abrevistaHija': 'abrirVistaHija'
}
abrirVistaHija: function() {
var vistaHija = new VistaHijaView({
model: new Modelo2(),
attributes: {
modelo1: this.model
}
});
vistaHija.render();
}
});
Entonces, al renderear vistaHija
, ésta tiene una referencia a la instancia de Modelo1
accesible como this.attributes.modelo1
(que dentro de la vistaPadre
se accede como this.model
)
El método gatillaBuscar
de la vista 2 debiera entonces hacer:
gatillaBuscar: function() {
var _this = this;
this.model.set('id', this.$('#busqueda').value());
this.model.fetch().then(function(respuesta) {
_this.attributes.modelo1.set('detalle_registro', respuesta.attributes);
var vistaPadre = new VistaPadreView({
model: _this.attributes.modelo1
});
vistaPadre.render();
});
}
Lo que habrás hecho entonces es, desde las vistas, mutar modelos. Los modelos conservan su estado. Cuando reinstancias vistaPadre
desde vistaHija
pasándole la referencia a la instancia de Modelo1
, ésta tiene el nuevo estado de su modelo.
Juntando todo:
var Modelo1 = Backbone.Model.extend();
var Modelo2= new Backbone.Model.extend({
urlRoot: '/buscaregistro/';
});
var VistaPadreView=Backbone.View.extend({
events: {
'click #abrevistaHija': 'abrirVistaHija'
}
abrirVistaHija: function() {
var vistaHija = new VistaHijaView({
model: new Modelo2(),
attributes: {
modelo1: this.model
}
});
vistaHija.render();
}
});
var VistaHijaView = new Backbone.View.Extend({
events: {
'click .buscar': 'gatillaBuscar'
},
gatillaBuscar: function() {
var _this = this;
this.model.set('id', this.$('#busqueda').value());
this.model.fetch().then(function(respuesta) {
_this.attributes.modelo1.set('detalle_registro', respuesta.attributes);
var vistaPadre = new VistaPadreView({
model: _this.attributes.modelo1
});
vistaPadre.render();
});
}
});
var vistaPadre = new VistaPadreView({
model: new Modelo1();
});
vistaPadre.render();
Un camino alternativo más corto:
Ni siquiera necesitas reinstanciar VistaPadreView
porque ésta podrías haberla pasado a vistaHija
dentro de los atributos. La instancia vistaPadre
sigue existiendo aunque ya no esté en el DOM. Entonces si dentro de vistaPadre
haces:
var vistaHija = new VistaHijaView({
model: new Modelo2(),
attributes: {
modelo1: this.model,
vistaPadre : this
}
});
vistaHija.render();
Luego podrías re-renderear la vistaPadre
desde vistaHija
si gatillaBuscar
se definiera como:
gatillaBuscar: function() {
var _this = this;
this.model.set('id', this.$('#busqueda').value());
this.model.fetch().then(function(respuesta) {
_this.attributes.modelo1.set('detalle_registro', respuesta.attributes);
_this.attributes.vistaPadre.render();
})
}
Como _this.attributes.vistaPadre
es la instancia original de vistaPadre
y ésta ya está asociada a la instancia de Modelo1
, la mutación que hiciste sobre ese modelo ya estará incorporada cuando vuelvas a renderear vistaPadre
.