Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Patrones para el manejo de Views con Backbone.js y problema asincrónico

Estas en el tema de Patrones para el manejo de Views con Backbone.js y problema asincrónico en el foro de Frameworks JS en Foros del Web. Buenas, esta vez estoy desarrollando con Backbone.js y tengo un problema. Quisiera saber cual es la forma correcta de jugar con las views de Backbone. ...
  #1 (permalink)  
Antiguo 28/01/2013, 17:16
 
Fecha de Ingreso: diciembre-2010
Mensajes: 32
Antigüedad: 9 años, 10 meses
Puntos: 0
Pregunta Patrones para el manejo de Views con Backbone.js y problema asincrónico

Buenas, esta vez estoy desarrollando con Backbone.js y tengo un problema. Quisiera saber cual es la forma correcta de jugar con las views de Backbone. Para mayor detalle ilustraré el problema con un ejemplo:

Suponiendo que tenemos una API tipo RESTful que administra la información de unos patrocinadores y que esa información debe ser listada y agregada a través de la web:

Vista agregar patrocinador:


Vista listar patrocinadores:


Para esto, tenemos el siguiente modelo (no es PHP es JS xD):

Código PHP:
var ejemplo ejemplo || {};

ejemplo.Patrocinador Backbone.Model.extend({
   
url'/api/patrocinadores',
   
   
defaults: {
       
nombrepatrocinador '',
       
logopatrocinador'',
       
bannerpatrocinador''
   
}
}); 
También tenemos una colección de patrocinadores:

Código PHP:
ejemplo.Patrocinadores Backbone.Collection.extend({
    
url'/api/patrocinadores',
    
    
modelejemplo.Patrocinador
}); 
Por otro lado tenemos un router para controlar la aplicación:
Código PHP:
ejemplo.AppRouter Backbone.Router.extend({
    
    
routes:{
        
"patrocinadores/add" "addPatrocinador",
        
"patrocinadores" "listarPatrocinadores"
    
},
    
    
addPatrocinador: function(){
        
this.addpatrocinadorview = new ejemplo.AddPatrocinadorView();
        $(
'#content').html(this.addpatrocinadorview.render().el);
    }, 
    
    
listarPatrocinadores: function(){
        
this.listarpatrocinadorview = new ejemplo.ListarPatrocinadoresView(); 
        $(
'#content').html(this.listarpatrocinadorview.render().el);
    }
}); 
El router crea y muestra las vistas de Agregar y Listar patrocinadores de acuerdo a la url ingresada.

La vista de agregar patrocinador captura los datos del formulario y por medio de model.save() se guardan en el servidor. Al guardar, la aplicación se dirige a la vista de listar patrocinadores.

Código PHP:
ejemplo.AddPatrocinadorView Backbone.View.extend({
    
template_.template($('#tpl_addpatrocinador').html()),
    
    
events: {
        
'click #addpatrocinador''addPatrocinador'
    
},
    
    
initialize: function(){
      
this.model = new ejemplo.Patrocinador();
    },
    
    
render: function(){
        
this.$el.html(this.template());
        
Backbone.Validation.bind(this);
        return 
this;
    },
    
    
getPatrocinadorData: function(){
       
//devuelve la data del formulario en json
    
},
    
    
addPatrocinador: function(e){
        
e.preventDefault();
        
this.model.save(this.getPatrocinadorData(),{
            
success: function(){
                
window.location '#patrocinadores';
            },
            
error: function(){
                
//muestra un popup con los errores de validaciones
            
}
        });
    }
}); 
Por otro lado, la vista de listar patrocinadores refresca la lista al momento de cargarse por medio de un collection.fetch(), de tal forma que se pueda sincronizar la colección con el servidor.

Código PHP:
ejemplo.ListarPatrocinadoresView Backbone.View.extend({   
    
template_.template($('#tpl_listarpatrocinadores').html()),
    
    
events: {

    },
    
    
initialize: function(){  
        
this.collection = new ejemplo.Patrocinadores();
         
_.bindAll(this'addOne''addAll''render');
        
this.collection.on('reset'this.render);       
        
this.collection.fetch();
    },
    
    
render: function(){  
        
this.$el.empty();
        
this.$el.html(this.template());
        
this.addAll();
        return 
this;
    },
    
    
addOne: function(patrocinador){
        var 
patrocinadorview = new ejemplo.PatrocinadorItemView({
            
modelpatrocinador
        
});
        
//para acceder a la tabla tuve que navegar a través del elemento :/
        
$(this.$el.children().get(2)).append(patrocinadorview.render().el);
    },
    
    
addAll: function(){     
        
this.collection.each(this.addOne);
    }
}); 
De esta manera, la aplicación es capaz de agregar y listar, pero hay un problema, cuando se agrega un nuevo patrocinador, y luego se carga la vista de listar patrocinadores, el nuevo patrocinador no logra cargarse en la lista, pero si se carga si nuevamente refresco la página.
Esto se debe (hipótesis) a que tanto model.save() como collection.fetch() ejecutan peticiones asíncronas lo cual sugiere que el fetch se ejecuta antes de que haya terminado de guardar el nuevo patrocinador y por eso no aparece.
Hay un problema de comunicación entre las dos vistas ya que cada quien hace lo suyo por separado pero no interactúan entre sí.

En este orden de ideas, que debería hacer para que la aplicación maneje las vistas de una forma mas coherente con la idea de single page application?

Etiquetas: formulario, html, js, manejo, patrones, php, views
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:51.