Ember.js 如何有效地将记录存储为余烬查询参数

背景：用户可以根据标签过滤列表，每个标签都是一个余烬数据模型。所选的过滤标记应通过查询参数存储在URL中。我还想在界面中显示所选的标签

最好的办法是什么

我很确定我只想存储ID，但是如果我这样做，我必须维护一个单独的变量/计算属性，在这里我存储来自查询参数的ID的实际记录。这种复制在我看来是错误的

除了这个问题之外，我不知道是否应该使用数组查询参数或构建逗号分隔的ID字符串。如果我使用前一种方法，我会得到丑陋的URL，比如

？标记=%5B“3”%5D

。但做后者意味着做更多的工作

那么你是如何解决这类问题的呢？我希望我错过了一些明显的、没有那么多缺点的东西：）

容易

找出URL中没有编码的非字母数字字符。使用，我找到了以下字符：

~*（）-。

选择一个标记名中未使用的字符。假设它是

*

。将其用作分隔符

对标记ID使用标记名称。或者至少强制使用唯一的标记名

然后您得到了一个可读性很好的查询：

?tags=foo*bar*baz&search=quux

要实现自定义查询参数序列化/反序列化，请执行以下操作：

Ember.Route.reopen({
  serializeQueryParam: function(value, urlKey, defaultValueType) {
    if (defaultValueType === 'array') {
      return `${value.join('*')}`;
    }
    return this._super(...arguments);
  },

  deserializeQueryParam: function(value, urlKey, defaultValueType) {
    if (defaultValueType === 'array') {
      return value.split('*');
    }
    return this._super(...arguments);
  }
});

演示：

---

如果您必须在查询参数中使用数字标记ID（例如，您的标记名不是唯一的），那么您需要更多的自定义：，。

感谢您的精彩回答Andrey！你真的明白我在追求什么：）我现在在我的应用程序中使用你的方法，再次感谢。提醒一下：你的例子好像在我的电脑上的Chrome中被破坏了？我猜是ES6语法的东西，也许你的电脑上安装了一些插件？只是想为将来指出这一点。你是说一个示例应用程序坏了？他们两个？我可以在Chrome中很好地运行它们，JSBin应该负责传输。