簡體   English   中英

灰燼之路混搭模型

[英]Ember Route Mixin, Model

我正在使用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);

控制器/ posts.js

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

template / posts.hbs (此模板在routes / 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);
        }
    }
});

混入/ 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);
      }

});

路線/ 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;
    }
});

並且common cli的構建/服務過程或chrome javascript控制台中沒有錯誤。

我將所需的代碼提取為:

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中設置模型的屬性!

弄清楚了,所以混入:ActiveclassrouteMixin有一個方法setupController:function(controller),顯然缺少該模型。 更改為

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM