javascript - Backbone.js 仅在通过路由器移动时无法加载 Tinymce 脚本

Question

我正在使用 tinymce 创建丰富的 Textarea，我正在使用 backbone.js。

问题是，当我从同一站点上的先前 URL 移动到路由器中的那个“页面”时，它就不起作用了。

如果我使用指向该路由的直接链接刷新页面，它就可以正常工作。我真的不明白会出什么问题。

这是 View :

var template = function (name) {
    var source = $('#' + name + '-template').html();
    return Handlebars.compile(source);
}; 
  BT.Common.FormTextArea = Backbone.View.extend({
    template : template('form-input-textarea'),
    tagName: 'div',
    className: "control-group",
    initialize: function(){
    },
    render: function(){
        console.debug("Render FormTextArea");
        var html = this.template(this.model.toJSON());
        this.$el.html(html);    
        tinymce.init({selector:'textarea'});
        return this;
    },
});

模板:

  <script type="text/x-handlebars-template" id="form-input-textarea-template">
      <label class="control-label" for="message">{{lable}}</label>
      <div class="controls">
        <textarea name="msgpost" id="msgpost" cols="50" rows="10">
            {{text}}  
        </textarea>
      </div>
</script>

Answer 1

TinyMCE 显然不喜欢在分离节点上工作。完全没有。

此设置重现了您的困境:

var v = new BT.Common.FormTextArea({
    model: new Backbone.Model({text: 'init'})
});

v.render().$el.appendTo('body');

和随附的 fiddle http://jsfiddle.net/nikoshr/pCdSy/

一个简单的解决方法是为您的 View 提供一个附加节点。例如，假设 #render 在 DOM 中:

var v = new BT.Common.FormTextArea({
    model: new Backbone.Model({text: 'init'}),
    el: '#render'
});

v.render();

和更新的 Fiddle http://jsfiddle.net/nikoshr/pCdSy/2/

另一种解决方案是将您的 View el 临时添加到 DOM，应用 TinyMCE，然后将其分离。

var BT.Common.FormTextArea = Backbone.View.extend({
    template : template('form-input-textarea'),
    tagName: 'div',
    className: "control-group",

    initialize: function(){
    },

    render: function(){
        console.debug("Render FormTextArea");

        var html = this.template(this.model.toJSON());
        this.$el.html(html);    

        $('body').append(this.$el);   
        tinymce.init({selector: 'textarea'});
        this.$el.detach();

        return this;
    }
});

http://jsfiddle.net/nikoshr/pCdSy/4/演示

警告:这看起来真的很像 hack，可能会产生意想不到的结果。