2014-07-09 14 views
7

Я использую Ember.js, версию 1.7.0-beta.1, в своем последнем проекте. Я использую функцию query params, чтобы список остался в жестком обновлении (например, после перезагрузки выбранные элементы в списке все еще выбраны).Url-кодировка для параметров запроса в Ember.js

Я получил контроллер которого управляет, что:

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

Он работает удивительным, но с одним условием: URL является URL-закодированы:

Chrome & IE:

путь/354? Files =% 5B "6513"% 2C "6455"% 2C "6509"% 2C "6507"% 2C "6505"% 2C "6504"% 2C "6511"% 5D

FF (автоматически устанавливает кронштейны):

путь/354 файлов = "6513" % 2C "6455" % 2C "6509" % 2C "6507" % 2C "6505" % 2C» 6504 "% 2C" 6511 "]

Есть ли способ в Ember для декодирования строки-запроса в более читаемом формате? Может быть, я мог бы использовать функцию decodeURIComponent()?

требуемый выход:

путь/354 файлов = [ "6513", "6455", "6509", "6507", "6505", "6504", "6511"]

ответ

11

У меня была очень похожая проблема, и она работала, переопределяя serializeQueryParam и deserializeQueryParam в пути.

В контроллере вы бы:

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

И в маршруте:

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

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

и:

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-адрес будет стать чем-то вроде:

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

Какой будет реальный массив на стороне сервера.

Take a look at this working example on jsbin.com

+0

Удивительные, эти крючки - именно то, что мне нужно. Спасибо! –

+0

Я пробовал вышеупомянутый подход, но изменил 'deserializeQueryParam()', чтобы просто вернуть 'значение' без' parseInt() 'каждое из своих значений. Проблема в том, что привязки между параметрами запроса и свойством 'files' контроллера не обновлялись должным образом - кажется, что Ember не узнал, когда значение менялось. Поэтому мне пришлось вызвать '.copy()' on 'value' внутри' deserializeQueryParam() ', чтобы Ember заметил, когда значение было обновлено. Просто хедз-ап, если кто-то еще застрял в этом вопросе. – jessepinho

Смежные вопросы