2014-07-09 12 views
7

Używam Ember.js, wersja 1.7.0-beta.1, w moim najnowszym projekcie. Używam funkcji query params, aby lista przetrwała odświeżanie (np. Po ponownym załadowaniu wybrane pozycje z listy są nadal zaznaczone).Kodowanie adresu URL dla parametrów zapytania w Ember.js

Mam kontroler, którego zarządza, że:

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 
    } 
}); 

Działa niesamowite, ale pod jednym warunkiem: adres URL jest url zakodowane:

Chrome & IE:

ścieżka/354? Pliki =% 5B "6513"% 2C "6455"% 2C "6509"% 2C "6507"% 2C "6505"% 2C "6504"% 2C "6511"% 5D

FF (automatycznie ustawia wsporniki):

ścieżka/354 files = "6513" % 2C "6455" % 2C "6509" % 2C "6507" % 2c "6505" % 2C” 6504 "% 2C" 6511 "]

Czy w Ember jest sposób na dekodowanie ciągu znaków zapytania do bardziej czytelnego formatu? Może mógłbym gdzieś użyć funkcji decodeURIComponent()?

pożądany wynik:

ścieżka/354 pliki = [ "6513", "6455", "6509", "6507", "6505", "6504", "6511"]

Odpowiedz

11

Miałem bardzo podobny problem i sprawiłem, że zadziałał on przez przesłonięcie serializeQueryParam i deserializeQueryParam na trasie.

W regulatorze trzeba:

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

A na trasie:

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

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

oraz:

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; 
    }, 

URL może wtedy stać się coś takiego:

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

Która będzie wtedy prawdziwą tablicą po stronie serwera.

Take a look at this working example on jsbin.com

+0

Wspaniale, te haki są dokładnie tym, czego potrzebowałem. Dzięki! –

+0

Próbowałem powyższego podejścia, ale zmieniono 'deserializeQueryParam()', aby po prostu zwrócić 'wartość' bez' parseInt() 'każdej z jej wartości. Problem polega na tym, że powiązania między parametrami zapytania a właściwością 'files' kontrolera nie były poprawnie aktualizowane - wydaje się, że Ember nie rozpoznał, kiedy wartość była zmieniana. Musiałem więc wywołać '.copy()' na 'wartość' wewnątrz' deserializeQueryParam() ', aby Ember zauważył, kiedy wartość została zaktualizowana. Tylko heads-up, jeśli ktoś inny utknie w tej sprawie. – jessepinho

Powiązane problemy