2

在 Ember.js 中，是否可以强制在路由上定义的计算属性在模型刷新时更新？

我注意到，当我第一次点击路由时，我将看到调用支持计算属性的函数，但如果由于查询参数（例如page）更改而刷新路由模型，则支持计算属性的函数不会再次调用。我认为这是因为 Ember 不相信计算的属性已经改变，部分原因是它不相信它们所依赖的属性已经改变。例如：

// routes/example.js
export default Ember.Route.extend({

  limit: 10,
  queryParams: {
    page: {
      refreshModel: true
    }
  },

  offset: computed("limit", function() {
    console.log("IN: offset");
    let params = this.paramsFor(this.get("routeName"));
    if (params.page) {
      // calculate offset using the "params.page" value
    }
    return 0;
  }),

  paginator: computed("limit", "offset", "query", function() {
    console.log("IN: paginator");
    // Calls: this.get("offset") and this.get("query") as part of its invocation
    // Returns an object that can resolve the pagination of the model.
    ...
  }),

  query: computed(function() {
    console.log("IN: query");
    ...
  }),

  model(params) {
    console.log("IN: model");
    let paginator = this.get("paginator");
    ...
  },

  setupController(controller, model) {
    this._super(controller, model);
    controller.setProperties({
      offset: this.get("offset"),
      limit: this.get("limit"),
      pageCount: model.meta.total,
    });
  }
});

...和控制器：

// controllers/example.js
export default Ember.Controller.extend({

  actions: {

    firstPage: function() {
      this.transitionToRoute({
        queryParams: {
          page: 1
        }
      });
    },

    lastPage: function() {
      let lastPage = Math.ceil(this.get('pageCount')/this.get('limit'));
      this.transitionToRoute({
        queryParams: {
          page: lastPage
        }
      });
    },

    nextPage: function() {
      let totalPages = Math.ceil(this.get('pageCount')/this.get('limit'));
      if(this.incrementProperty('page') > totalPages) {
         this.set('page', totalPages);
      }

      this.transitionToRoute({
        queryParams: {
          page: this.get('page')
        }
      });
    },

    previousPage: function() {
      if(this.decrementProperty('page') < 1) {
        this.set('page', 1);
      }

      this.transitionToRoute({
        queryParams: {
          page: this.get('page')
        }
      });
    }
  },

  ...

  /**
   * The result page that a user is currently viewing.
   */
  page: 1,

  /**
   * The query parameters.
   */
  queryParams: ["page"],

});

我第一次通过在浏览器中点击关联的 URL 来加载路由时，我看到：

IN: model
IN: paginator
IN: offset
IN: query

如果我单击渲染模板中更改?page查询参数的按钮，例如使用nextPage操作，我会看到它调用以刷新模型，但不会调用计算属性背后的任何逻辑，例如：

IN: model

我尝试添加controller.page到依赖属性列表中，但这似乎并没有改变观察到的行为。顺便说一句，函数似乎总是被调用（如我所料）。

我不应该在路线中使用计算属性吗？似乎如果我想使用计算属性，我需要以某种方式通知 Ember 在刷新模型时重新处理它们，无论 Ember 是否认为它们已经改变。

4

0 回答 0