javascript - Ember.js 中查询参数的 URL 编码

Question

我在我的最新项目中使用版本 1.7.0-beta.1 的 Ember.js。我用 query params使列表在硬刷新后仍然存在的功能(例如，重新加载后，列表中的选定项目仍处于选中状态)。

我有一个负责管理的 Controller :

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:

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

FF(自动设置括号):

path/354?files="6513"%2C"6455"%2C"6509"%2C"6507"%2C"6505"%2C"6504"%2C"6511"]

在 Ember 中有没有办法将查询参数字符串解码为更易读的格式？也许我可以在某处使用 decodeURIComponent() 函数？

期望的输出:

path/354?files=["6513","6455","6509","6507","6505","6504","6511"]

Answer 1

我有一个非常相似的问题，并通过覆盖路由中的 serializeQueryParam 和 deserializeQueryParam 使其工作。

在 Controller 中你将拥有:

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

在 route :

  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