2014-07-09 12 views
7

Sto utilizzando Ember.js, versione 1.7.0-beta.1, nel mio ultimo progetto. Io uso la funzione query params per fare in modo che una lista sopravviva a un duro aggiornamento (ad esempio dopo una ricarica, gli elementi selezionati nell'elenco sono ancora selezionati).Codifica URL per parametri di query in Ember.js

ho ottenuto un controller che gestisce che:

export default Ember.ObjectController.extend({ 
    queryParams: [{selectedFiles: 'files'}], 
    selectedFiles: Ember.A([]), //list of file ids 

    ... //other props 

    actions: { 
    selectFile: function(file) { 
     //set or remove the file id to the selectedFiles property 
    } 
}); 

Funziona impressionante, ma con una condizione: l'url è con codifica URL:

Chrome & IE:

percorso/354? Files =% 5B "6513"% 2C "6455"% 2C "6509"% 2C "6507"% 2C "6505"% 2C "6504"% 2C "6511"% 5D

FF (imposta automaticly le staffe):?

percorso/354 file = "6513" % 2C "6455" % 2C "6509" % 2C "6507" % 2C "6505" % 2C" 6504 "% 2C" 6511 "]

C'è un modo in Ember per decodificare la stringa query-param in un formato più leggibile? Forse potrei usare la funzione decodeURIComponent() da qualche parte?

l'output desiderato:?

percorso/354 file = [ "6513", "6455", "6509", "6507", "6505", "6504", "6511"]

risposta

11

Ho avuto un problema molto simile e l'ho fatto annullando serializeQueryParam e deserializeQueryParam nel percorso.

Nel controllore si avrebbe:

queryParams: ['files'], 
files: [] 

E nel percorso:

serializeQueryParam: function(value, urlKey, defaultValueType) { 
    if (defaultValueType === 'array') { 
     return value; 

     // Original: return JSON.stringify(value); 
    } 
    return '' + value; 
    }, 

e:

deserializeQueryParam: function(value, urlKey, defaultValueType) { 

    if (defaultValueType === 'array') { 

     var arr = []; 
     for (var i = 0; i < value.length; i++) { 
     arr.push(parseInt(value[i], 10)); 
     }  

     return arr; 

     // Original: return Ember.A(JSON.parse(value)); 
    } 

    if (defaultValueType === 'boolean') { 
     return (value === 'true') ? true : false; 
    } else if (defaultValueType === 'number') { 
     return (Number(value)).valueOf(); 
    } 
    return value; 
    }, 

l'URL sarà poi diventare qualcosa di simile:

?files[]=1&files[]=2&files[]=3 

Quale sarà quindi un vero array sul lato server.

Take a look at this working example on jsbin.com

+0

Impressionante, questi ganci sono esattamente ciò di cui avevo bisogno. Grazie! –

+0

Ho provato l'approccio sopra, ma ho cambiato 'deserializeQueryParam()' per restituire semplicemente 'value' senza' parseInt() 'in ciascuno dei suoi valori. Il problema è che i collegamenti tra i parametri di query e la proprietà 'files' del controller non si aggiornavano correttamente: sembra che Ember non abbia riconosciuto quando il valore veniva modificato. Quindi dovevo chiamare '.copy()' su 'value' all'interno di' deserializeQueryParam() 'in modo che Ember notasse quando il valore è stato aggiornato. Solo un testa a testa se qualcun altro rimane bloccato su questo problema. – jessepinho