CP 和 didInsertElement 的“未定义不是函数”

Question

我将一个 JS 组件包装到一个 Ember 插件中，我以前做过很多次，但我一开始就遇到了一个问题，这让我担心可能是ember 有轻微的偏移？无论如何希望可以解释以下原因：

import Ember from 'ember';
import layout from '../templates/components/nav-menu';

export default Ember.Component.extend({
  layout: layout,
    tagName: 'nav',
  classNames: ['navmenu','navmenu-default','navmenu-fixed-left'],
  attributeNames: ['role:navigation'],
  classNameBindings: ['offcanvas'],
  hideAt: null,
  offcanvas: function() {
    let hideAt = this.get('hideAt');
    if(!hideAt) {
      return 'offcanvas';
    } else {
      return 'offcanvas-%@'.fmt(hideAt);
    }
  }.property('hideAt'),

  _initialize: function() {
    this.$().offcanvas();
  }.on('didInsertElement')
});

这在两个方面失败了。照原样在 offcanvas 计算属性中失败说：

Uncaught TypeError: undefined is not a function

很奇怪，但它变得更奇怪了。如果删除此计算属性，则它会在 _initialize() 调用中失败，并出现相同的“未定义不是函数”错误：

我使用的是 Ember 1.11.0，Ember-CLI 0.2.2。

Answer 1

你说得对，这与 Ember CLI 0.2.2 有关。来自the changelog：

插件现在默认包含 ember-disable-prototype-extensions，这确保插件的编写方式无论消费者原型扩展偏好如何都能正常工作。

我看到了他们做出改变背后的原因，这完全有道理。您现在需要使用Ember.computed 和Ember.on 来创建您的属性和观察者。所以这些：

initialize: function() {}.on('didInsertElement'),
offcanvas: function() {}.property('hideAt')

成为这些：

initialize: Ember.on('didInsertElement', function() {}),
offcanvas: Ember.computed('hideAt', function() {})

您可以阅读有关禁用原型扩展的更多信息here。