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

Question

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

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

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

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

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

Answer 1

简单！

找出哪些非字母数字字符没有在 URL 中编码。使用 this tool，我找到了这些字符：~!*()_-.
选择一个未在您的标签名称中使用的字符。假设它是 *。将其用作分隔符。
使用标签名称作为标签 ID。或者至少强制使用唯一的标签名称。

那么您得到了一个可读性很好的查询：

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

要实现自定义查询参数 serialization/deserialization，请执行以下操作：

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

演示：app, code.

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

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

How to efficiently store records as Ember query parameters

ember.js

query-parameters

ember-query-params