ember.js - 如何在 ember 的 url 中显示默认查询参数值？

Question

如果查询参数值是默认值，Ember 不会在 url 中显示查询参数。但我想展示它。是否可以选择将此行为更改为显示而不是隐藏？

App.IndexController = Ember.ArrayController.extend({
  queryParams: ['type'],
  type: "horror"  // the default value, won't appear in URL or params
})

Answer 1

本指南部分介绍了默认值和序列化。不幸的是，它没有提供包含默认值的方法，我不确定是否有开箱即用的方法。

但是，有一个小技巧。设置查询参数时，不要将默认值放在控制器中，而是null在路由中使用和设置默认值。这让 Ember 认为它不是默认值，而从您的角度来看它是。

App.IndexRoute = Ember.Route.extend({
    resetController: function(controller) {
        controller.set('type', 'horror');
        return this._super.apply(this, arguments);
    }
});

App.IndexController = Ember.ArrayController.extend({
    queryParams: ['type'],
    type: null
});

Answer 2

我尝试将初始值设置为 null，但它并不总是有效：有时我的查询参数会出现在 URL 中，有时不会。如果查询参数不在 URL 中，我通过 window.history.replaceState() 操作浏览器历史记录解决了这个问题。我将代码放在 Ember.run.schedule('afterRender', this, function() {...}) 的 setter 中，以便在 Ember 完成渲染后运行我的逻辑。

export default Ember.Controller.extend({
    setMyParam: function(newValue) {
        if (newValue !== null && typeof(newValue) !== 'undefined') {
            Ember.set(this, 'myParam', newValue);
            Ember.run.schedule('afterRender', this, function() {
                window.location.toString().match(/^(.+?)(\?.+)$/); // $1 = base URL, $2 = query params
                var queryParams = RegExp.$2;
                if (queryParams) {
                    if (queryParams.indexOf('myParam') === -1) {
                        console.log('No myParam in query parameters. Setting myParam=' + newValue);
                        window.history.replaceState({}, document.title, window.location.toString() + '&myParam=' + newValue);
                    }
                } else {
                    // No query parameters, so add it as the first query parameter
                    console.log('No query parameters, so adding myParam=' + newValue + ' as the first query parameter.');
                    window.history.replaceState({}, document.title, window.location.toString() + '?myParam=' + newValue);
                }
            });
         } else {
             console.log('setMyParam: newValue=' + newValue + ' is null or undefined. Not setting it!');
         }
    }
});