转换为视图时，Ember会抛出重新渲染错误

Question

我的观点是初始化Redactor WYSIWYG编辑器。它直接进入路线时工作正常，但不会从一条路线回到这条路线。即从/转到/documents/1。

这是我得到的错误：

Uncaught Error: Something you did caused a view to re-render after it
rendered but before it was inserted into the DOM. 

查看：

我也在视图中发表了一些评论。

App.RedactorView = Ember.TextArea.extend({
  tagName: 'div',
  init: function() {
    this._super();
    this.on("didInsertElement", this, this._updateElementValue);
  },
  _updateElementValue: Ember.observer(function() {
    var value = Ember.get(this, 'value'),
        $el = this.$();

    if ($el && value !== $el.getCode()) {
      $el.setCode(value);
    }
  }, 'value'),
  _elementValueDidChange: function() {
    Ember.set(this, 'value', this.$().getCode());
  },
  didInsertElement: function() {
    console.log('didInsert');
  },
  willInsertElement: function() {
    // these two lines causes the error when coming from other route, but works fine when accessed directly
    var test = this.$().attr('class');
    this.$().redactor(); 

    // returns fine when accessed directly, otherwise not available, see explanation above
    console.log(this.$().getCode());
  }
});

我尝试将代码移到didInsertElement但是后来我失去了以前可以访问的Redactor函数的访问权限：

  didInsertElement: function() {
     // will not throw any errors when transitioned from other route
    var test = this.$().attr('class');
    this.$().redactor(); 

    // Uncaught TypeError: Cannot call method 'getCode' of undefined
    console.log(this.$().getCode());
  },

有什么想法吗？

Answer 1

所以看起来很懒惰并且扩展了Ember.TextArea是一个坏主意。我猜其中一个子类搞乱了jQuery的工作。

我改变了我的观点，现在它正在运作。

App.RedactorView = Ember.View.extend({
  tagName: 'div',
  init: function() {
    this._super();

    this.on("focusOut", this, this._elementValueDidChange);
    this.on("change", this, this._elementValueDidChange);
    this.on("paste", this, this._elementValueDidChange);
    this.on("cut", this, this._elementValueDidChange);
    this.on("input", this, this._elementValueDidChange);
  },
  _updateElementValue: Ember.observer(function() {
    var value = Ember.get(this, 'value'),
        $el = this.$();

    if ($el && value !== $el.getCode()) {
      $el.setCode(value);
    }
  }, 'value'),
  _elementValueDidChange: function() {
    Ember.set(this, 'value', this.$().getCode());
  },
  didInsertElement: function() {
    this.$().redactor();
    this._updateElementValue();
  }
});