1

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

解决这个问题的最佳方法是什么？

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

除了这个问题，我不知道我是否应该使用数组查询参数或构建一个逗号分隔的 ID 字符串。如果我做前者，我最终会得到丑陋的 URL，比如?tags=%5B"3"%5D. 但做后者意味着做更多的工作。

那么你对这类问题的处理方法是什么？我希望我错过了一些没有那么多缺点的明显的东西:)

4

1 回答 1

1

简单的！

  1. 找出哪些非字母数字字符未在 URL 中编码。使用这个工具，我发现了这些字符：~!*()_-.
  2. 选择一个未在您的标签名称中使用的字符。假设它是*. 将其用作分隔符。
  3. 使用标签名称作为标签 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（例如，您的标签名称不是唯一的），那么您需要更多的自定义：app、code。

于 2016-03-10T11:02:58.907 回答