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

Question

我想要在路由模型中的数据更改时更改控制器中的计算属性。

路线：

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') 
}); 

此代码不会产生错误，但不工作 - “页面” 总是空的。并且“页面”属性不会在模型更改时重新计算。我究竟做错了什么？以及如何实现预期的结果？

P.S. Ember版本 - 1.13。

Answer 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。

Answer 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') 
});