2011-09-16 16 views
8

Voglio passare le coppie di valori chiave come parametri alle route Backbone e voglio che venga deserializzato su un oggetto javascript prima che venga chiamata la funzione mappata.Parametri coppia valore chiave che gestiscono in Backbone.js Router

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

Quando vado a "http: //...#dashboard chiave1 = val1 & chiave2 = val2?", Quindi {chiave1: "val1", key2: "val2"} deve essere stampato sul console.

Attualmente sto usando il metodo $ .deparam di jQuery BBQ all'interno di ciascuna funzione mappata per ottenere l'oggetto deserializzato. Sarebbe bello poter estendere il Router e definirlo solo una volta, in modo che params sia accessibile all'interno di tutte le funzioni mappate come un oggetto. Quale sarebbe un modo pulito per farlo? E ci sono alcune insidie ​​in questo ??

Molto grazie,

Mano

+1

Farei attenzione a questo. Stai generando un URI che potrebbe confondere il tuo browser. # e ? sono considerati riservati nelle specifiche URI e? è previsto prima di #. Potrebbe non essere un problema, ma sembra che potrebbe causare conseguenze indesiderate in diversi browser. http://labs.apache.org/webarch/uri/rfc/rfc3986.html –

+0

@BrianGenisio Grazie per le informazioni. Funziona ora ma come dici tu potrebbe smettere di funzionare in un secondo momento quando i browser iniziano a rispettare lo standard :-) Proveremo un approccio alternativo. –

+0

Perché non usare solo la barra? –

risposta

10

Si dovrebbe ridefinire _extractParameters funzione Backbone.Router. Quindi tutte le funzioni del router saranno invocate con il primo parametro che è l'oggetto 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 demo di lavoro è here.