ember.js - 过渡到视图时，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();
  }
});