"undefined is not a function" 用于 CP 和 didInsertElement

"undefined is not a function" for CP and didInsertElement

我正在将一个 JS 组件包装到一个 Ember 插件中,这是我以前做过很多次的事情,但我 运行 一开始就遇到了一个问题让我担心 ember 的 "magic" 可能稍微移动了?无论如何希望可以解释以下原因:

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() 调用时失败并出现相同的 "undefined is not a function" 错误:

我正在使用 Ember 1.11.0,Ember-CLI 0.2.2。

你是对的,这与 Ember CLI 0.2.2 有关。来自 the changelog:

Addons now have ember-disable-prototype-extensions included by default, this ensures add-ons are written in a way that works regardless of the consumers prototype extension preference.

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

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

变成这些:

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

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