Ember Route Mixin, Model

Question

I am using ember cli to generate my project structure. When I extend a Route class with a Mixin and a Model. The models stops being displayed in my outlet.

controllers/application.js:: (ActiveclasscontrollerMixin is just used to provide application level properties, which is used to determine which class attribute is active - I have provided this just for reference it the other mixin ActiveclassrouteMixin.js which is causing the issue when used with the model hook of a route. )

import Ember from 'ember';
import ActiveclasscontrollerMixin from 'embercliapp/mixins/activeclasscontroller';

export default Ember.Controller.extend(ActiveclasscontrollerMixin);

controllers/posts.js

import Ember from 'ember';
var PostsController = Ember.ArrayController.extend();
export default PostsController;

template/posts.hbs (this template works fine when routes/posts.js, only overrides model when extending the Ember.Route object and displays all 2 posts)

<div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
          <table class='table'>
            <thead>
              <tr><th>Recent Posts</th></tr>
            </thead>

            <tbody>
              {{#each model}}
                <tr>
                  <td>
                    {{#link-to 'post' this}}{{title}} <small class='muted'>by {{author.name}}</small>{{/link-to}}
                  </td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        </div>

        <div class="span9">
          {{outlet}}
        </div>
      </div>
    </div>

mixins/ActiveclasscontrollerMixin.js - (only used in /controllers/application.js)

import Ember from 'ember';


export default Ember.Mixin.create({
    isHome: '',
    isPosts: '',
    isAbout: '',

    sayAlert: function(sayAlert){
        alert(sayAlert);
    },

    setActiveClass: function(routeName) {
        //alert('called setActiveClass:' + routeName);
        if ((routeName === 'isHome') || (routeName === 'application') || (routeName === 'index')) {
            this.set('isHome', 'active');
            this.set('isPosts', '');
            this.set('isAbout', '');
        }

        if (routeName === 'isPosts' || (routeName === 'posts')) {
            this.set('isPosts', 'active');
            this.set('isHome', '');
            this.set('isAbout', '');
        }

        if (routeName === 'isAbout' || (routeName === 'about')) {
            this.set('isAbout', 'active');
            this.set('isPosts', '');
            this.set('isHome', '');
        }

    },

    actions: {
        clickedAction: function(routeName) {
            this.setActiveClass(routeName);
        }
    }
});

mixins/ActiveclassrouteMixin.js

import Ember from 'ember';


export default Ember.Mixin.create({    

    setupController: function(controller) {
        this._super(controller);
        var routeName = this.get('routeName');
        this.controllerFor('application').setActiveClass(routeName);
      }

});

routes/posts.js

import Ember from 'ember';
import ActiveclassrouteMixin from 'embercliapp/mixins/activeclassroute';

var posts = [{
    id: '1',
    title: "Rails is Omakase",
    author: {
        name: "d2h"
    },
    date: new Date('12-27-2012'),
    excerpt: "There are lots of à la carte software environments in this world. Places where in order to eat, you must first carefully look over the menu of options to order exactly what you want.",
    body: "I want this for my ORM, I want that for my template language, and let's finish it off with this routing library. Of course, you're going to have to know what you want, and you'll rarely have your horizon expanded if you always order the same thing, but there it is. It's a very popular way of consuming software.\n\nRails is not that. Rails is omakase."
}, {
    id: '2',
    title: "The Parley Letter",
    author: {
        name: "d2h"
    },
    date: new Date('12-24-2012'),
    excerpt: "My [appearance on the Ruby Rogues podcast](http://rubyrogues.com/056-rr-david-heinemeier-hansson/) recently came up for discussion again on the private Parley mailing list.",
    body: "A long list of topics were raised and I took a time to ramble at large about all of them at once. Apologies for not taking the time to be more succinct, but at least each topic has a header so you can skip stuff you don't care about.\n\n### Maintainability\n\nIt's simply not true to say that I don't care about maintainability. I still work on the oldest Rails app in the world."
}];

export default Ember.Route.extend({
    model: function() {
        return posts;
    }
});

In this above case everything works as expected. However if I add use a mixin (ActiveclassrouteMixin) as well as a model when extending the route, the models stop displaying in the outlet:

export default Ember.Route.extend(ActiveclassrouteMixin,{
    model: function() {
        return posts;
    }
});

and there are no errors in the commond cli build/serve process or in the chrome javascript console.

It would help if you gave us the contents of ActiveclassrouteMixin. — GJK

Matt Jensen Matt Jensen · Accepted Answer · 2015-04-23T23:37:42

I would distill the required code to:

controller.js

setupController: function(controller, models) {
  this._super(controller, models); // insure mixin.setupController() called

  controller.setProperties( models );
}

mixin.js

setupController: function(controller, models) {
  this._super(controller, models); // Allow others to be called
}

Now you can set properties on the model within a mixin!

Ember Route Mixin, Model

2 Answers