Ember Route Mixin，模型

Question

我正在使用 ember cli 生成我的项目结构。当我使用 Mixin 和 Model 扩展 Route 类时。模型不再显示在我的插座中。

controllers/application.js:: (ActiveclasscontrollerMixin 仅用于提供应用程序级别的属性，用于确定哪个类属性处于活动状态 - 我提供这个只是为了参考它另一个 mixin ActiveclassrouteMixin.js 与路由的模型钩子一起使用时会导致问题。）

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（此模板在路由/posts.js 时工作正常，仅在扩展 Ember.Route 对象时覆盖模型并显示所有 2 个帖子）

<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 -（仅用于/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;
    }
});

在上述情况下，一切都按预期工作。但是，如果我在扩展路线时添加使用 mixin (ActiveclassrouteMixin) 以及模型，则模型将停止在插座中显示：

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

command cli 构建/服务过程或 chrome javascript 控制台中没有错误。

Answer 1

我会将所需的代码提炼为：

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
}

现在您可以在 mixin 中设置模型的属性！

Answer 2

想通了，所以 Mix-in: ActiveclassrouteMixin 有一个方法 setupController: function(controller)，这显然是缺少模型。改成

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