Computed Property In Controller Based On Route's Model In Emberjs

I want to implement computed property in controller that changes when data in route's model changed. Route: import Ember from 'ember'; export default Ember.Route.extend({ mode

Solution 1:

Since you have modified setupController hook, your controller has properties ingredients and recipes, but has no model property.

So your computed property should be:

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

SetupController hook guides link.

Solution 2:

Please try:

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() {
        returnthis.get('pages')[this.get('pageNumber')];
    }.property('pages', 'pageNumber')
});