如何有效地存储记录为灰烬查询参数

背景：用户可以过滤根据标签的列表，每个标签是灰烬的数据模型。所选的过滤标签应通过查询参数存储在URL中。我也想在界面中显示选定的标签。如何有效地存储记录为灰烬查询参数

这是什么最好的方法呢？

我敢肯定，我只希望存储的ID，但如果我这样做我有一个独立的变量/计算财产在哪里存储它来源于查询参数的ID的实际记录。这种重复对我来说似乎是错误的。

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

那么什么是你的方法对这类问题呢？我希望我失去了一些东西很明显，没有那么多的缺点:)

来源

2016-03-09 stravid

轻松！

找出哪些非字母数字字符未在URL中编码。使用this tool，我发现这些字符：~!*()_-.
选择一个未在标签名称中使用的字符。假设它是*。用它作为分隔符。
的标签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); 
    } 
});

演示：app，code。

如果必须使用查询参数的数字标签ID（例如，你的标签名称不是唯一的），那么你需要更多的定制：app，code。

来源

2016-03-10 11:02:58

感谢您的好评Andrey！你真的明白了我的所作所为后，我现在正在使用你的方法，再次感谢。您的示例似乎在我的电脑上的Chrome中被破解了？我假设用ES6语法的东西，也许你的电脑上安装了一些插件？只是想指出未来。 – stravid

你的意思是一个示例应用程序已损坏？两个都？我可以在Chrome中运行它们，JSBin应该处理转运。 –

如何有效地存储记录为灰烬查询参数

回答

相关问题