ember.js - 动态更新查询参数

Question

在 ember.js 中如何动态更新查询参数？

export default Ember.Controller.extend({
    myQuery: "test",

    queryParams: ["myQuery"],

    actions: {
       click() {
          this.set("myQuery", "update query param");
      }
    }
});


export default Ember.Route.extend({
  queryParams: {
    myQuery: { refreshModel: true }
  },
  model(params) {
    console.log(params)
  }
});

当操作被触发时，应该再次调用模型钩子(Hook)，除非我错了？

Please find an example here ，导航到 /test 路线并单击按钮。在控制台内，您可以看到模型 Hook 没有再次触发。

Answer 1

您的问题与您没有使用 action 帮助器将操作传递给 my-button 组件以及传递像 click=actions 这样的操作有关从 test.hbs 中单击。当你这样做时； Emberjs 未正确设置为 click 函数运行的 this 上下文。也就是说，如果您调试代码，您将会看到这一点；当 test.js Controller 中的 click 操作实际上设置为 my-button 组件时，您的旋转中的此上下文。这意味着您只需设置 my-button 组件的 myQuery 属性；它对 Controller 的 myQuery 属性没有任何作用；因此， Controller 的属性不会更新，因此即使您将其声明为 refreshModel: true，模型 Hook 也不会再次运行。

你能做什么？只需使用 action 帮助器，一切都会正常工作。只需检查以下twiddle 。 url 将更新，并且模型 Hook 将按照您的意愿执行。记住这一点； action 帮助器对于设置正确的 this 上下文至关重要，即使它看起来像一个正常的函数传递和调用。