基于 EmberJS 中路由模型的控制器中的计算属性答案

【问题标题】：Computed property in controller based on route's model in EmberJS基于 EmberJS 中路由模型的控制器中的计算属性
【发布时间】：2015-08-29 14:04:05
【问题描述】：

我想在控制器中实现计算属性，当路由模型中的数据发生变化时，它会发生变化。

路线：

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return new Ember.RSVP.hash({
            ingredients: this.store.findAll('ingredient'),
            recipes: this.store.peekAll('recipe')
        });
    },

    setupController: function(controller, modelHash) {
        controller.setProperties(modelHash);
    }
});

控制器：

import Ember from 'ember';

export default Ember.Controller.extend({
    pageNumber: 0,
    pageSize: 16,

    pages: function() {
        var pages = [];
        if (this.model != null) {
            var content = this.model.recipes;
            while (content.length > 0) {
                pages.push(content.splice(0, this.get("pageSize")));
            }
        }
        return pages;
    }.property('model.recipes.@each', 'pageSize'), 

    recipesOnPage: function() {
        return this.get('pages')[this.get('pageNumber')];
    }.property('pages', 'pageNumber')
});

此代码不会产生错误，但不起作用 - “页面”始终为空。并且“页面”属性不会在模型更改时重新计算。我究竟做错了什么？以及如何达到预期的效果？

附： Ember 版本 - 1.13。

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

由于您修改了setupController 挂钩，因此您的controller 具有ingredients 和recipes 属性，但没有model 属性。

所以你的计算属性应该是：

pages: function() {
 // avoid using model here
 // use this.get('recipes') instead of this.model.recipes
}.property('recipes.[]', 'pageSize')

SetupController 钩子guides link.

【讨论】：

谢谢，它有效。但是，现在我对“食谱”有问题，导致它是 PromiseArray，但这是另一个问题 =)。
promices 在 model 钩子中被解析（或拒绝），所以在控制器 recipes 中是 Ember.Array

【解决方案2】：

请尝试：

import Ember from 'ember';

export default Ember.Controller.extend({
    pageNumber: 0,
    pageSize: 16,

    pages: function() {
        var pages = [];
        var model = this.get('model');
        if (model != null) {
            var content = model.get('recipes');
            while (content.length > 0) {
                pages.push(content.splice(0, this.get("pageSize")));
            }
        }
        return pages;
    }.property('model.recipes.@each', 'pageSize'), 

    recipesOnPage: function() {
        return this.get('pages')[this.get('pageNumber')];
    }.property('pages', 'pageNumber')
});

【讨论】：