Question

这是一个糟糕的例子，但我只是想在控制器中使用mixin的属性。我在路线上做了同样的事情，可以访问该属性。我已经尝试过各种方式来引用我所知道的财产......我有什么误解？

// app/mixins/author-data.js
import Ember from 'ember';

export default Ember.Mixin.create({
  authorName: 'Example author name',
});

// app/controllers/application.js
import Ember from 'ember';
import AuthorDatas from 'app-name/mixins/author-data';

export default Ember.Controller.extend(AuthorDatas, {

  siteTitle: `Site title`,   

  fromAuthorData: this.get('authorName'), 
  // returns  - what is the proper syntax?

  actions: {
    showAuthor() {
      var author = this.get('fromAuthorData');
      console.log(`Author from controller: ${author}`);
    },
  },

});

// app/templates/application.hbs
{{fromAuthorData}}

这有效......

// app/routes/application.js
import Ember from 'ember';
import AuthorDatas from 'app-name/mixins/author-data';

export default Ember.Route.extend(AuthorDatas, {

  afterModel() { // arbitrary
    var intro = `Author from route:`;
    console.log(`${intro} this.authorName`, this.authorName );
    console.log(`${intro} this.get('author-name')`, this.get('authorName') );
  },

});

（我会做一个蠢货 - 但我不确定Mixins是否会以相同的方式工作〜因为它们不在列表中并且有0个文档）

Answer 1

控制器上的fromAuthorData属性应该像这样定义（我认为）：

fromAuthorData: Ember.computed('authorName', function() {
  return this.get('authorName'); // or whatever derived value you need
}

Answer 2

要理解我们需要讨论范围的问题，当你扩展/创建一个只传递选项的对象时，你的代码与：

let options = {

  siteTitle: `Site title`, 

  // `this` is undefined since we are in strict mode
  fromAuthorData: this.get('authorName'),

  actions: {
    showAuthor() {
      var author = this.get('fromAuthorData');
      console.log(`Author from controller: ${author}`);
    },
  }
};

export default Ember.Controller.extend(AuthorDatas, options);

现在要访问依赖于this作为持有它的对象的属性，您将需要一个与对象一起运行的函数，因为它返回该值的上下文，输入computed properties。您的代码变为：

// app/controllers/application.js
import Ember from 'ember';
import AuthorDatas from 'app-name/mixins/author-data';

const { computed } = Ember; 

export default Ember.Controller.extend(AuthorDatas, {
  siteTitle: `Site title`,   

  // We add `authorName` as the dependent key, should it change `fromAuthorData` will update
  fromAuthorData: computed('authorName', function() {
    // your author data stuff
    let authorName = this.get('authorName');
    // ...
    return authorDetails;
  }), 

  actions: {
    showAuthor() {
      var author = this.get('fromAuthorData');
      console.log(`Author from controller: ${author}`);
    },
  },
});

在Controller中使用Mixin属性

2 个答案: