2011-09-16 11 views
8

Quiero pasar pares de valores clave como parámetros a las rutas del Backbone y quiero que se deserialicen a un objeto javascript antes de que se llame a la función mapeada.Gestión de params de par de claves en el enrutador Backbone.js

var MyRouter = Backbone.Router.extend({ 
    routes: { 
    "dashboard?:params" : "show_dashboard" 
    }, 
    show_dashboard: function(params){ 
    console.log(params); 
    } 
}); 

Cuando voy a "http: //...#dashboard key1 = val1 val2 & clave2 =?", Entonces {key1: "val1", clave2: "val2"} debe ser impreso en el consola.

Actualmente estoy usando el método $ .deparam de jQuery BBQ dentro de cada función asignada para obtener el objeto deserializado. Sería bueno si puedo extender el enrutador y definirlo solo una vez para que se pueda acceder a params dentro de todas las funciones asignadas como un objeto. ¿Cuál sería una forma limpia de hacer esto? ¿Y hay algunos escollos en esto?

Muchas gracias,

Mano

+1

Tendría cuidado con esto. Está generando un URI que podría confundir a su navegador. # y? se consideran reservados en la especificación de URI y? se espera antes #. Puede que no sea un problema, pero parece que podría causar consecuencias no deseadas en diferentes navegadores. http://labs.apache.org/webarch/uri/rfc/rfc3986.html –

+0

@BrianGenisio Gracias por la información. Funciona ahora pero, como dices, podría dejar de funcionar en una fecha posterior cuando los navegadores comiencen a cumplir con el estándar :-) Intentaremos un enfoque alternativo. –

+0

¿Por qué no usar slash? –

Respuesta

10

Deberá volver a definir _extractParameters función en Backbone.Router. Entonces todas las funciones del enrutador se invocarán con el primer parámetro que es el objeto params.

// Backbone Router with a custom parameter extractor 
var Router = Backbone.Router.extend({ 
    routes: { 
     'dashboard/:country/:city/?:params': 'whereAmIActually', 
     'dashboard/?:params': 'whereAmI' 
    }, 
    whereAmIActually: function(params, country, city){ 
     console.log('whereAmIActually'); 
     console.log(arguments); 
    }, 
    whereAmI: function(params){ 
     console.log('whereAmI'); 
     console.log(arguments); 
    }, 
    _extractParameters: function(route, fragment) { 
     var result = route.exec(fragment).slice(1); 
     result.unshift(deparam(result[result.length-1])); 
     return result.slice(0,-1); 
    } 
}); 

// simplified $.deparam analog 
var deparam = function(paramString){ 
    var result = {}; 
    if(! paramString){ 
     return result; 
    } 
    $.each(paramString.split('&'), function(index, value){ 
     if(value){ 
      var param = value.split('='); 
      result[param[0]] = param[1]; 
     } 
    }); 
    return result; 
}; 

var router = new Router; 
Backbone.history.start(); 

// this call assumes that the url has been changed 
Backbone.history.loadUrl('dashboard/?planet=earth&system=solar'); 
Backbone.history.loadUrl('dashboard/usa/la/?planet=earth&system=solar'); 

La demostración de trabajo es here.

Cuestiones relacionadas