Backbone.js僅在移動路由器時才加載Tinymce腳本

Question

我正在使用tinymce創建豐富的Textarea，並且正在使用backbone.js。

問題是，當我從同一站點上的以前的URL移動到我的路由器中的「頁面」時，它不起作用。

如果我刷新頁面直接鏈接到該路線，它工作正常。我真的不明白會出現什麼問題。

這裏是視圖：

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'); 

以及隨附的小提琴http://jsfiddle.net/nikoshr/pCdSy/

一個簡單的解決方法是提供您的視圖一個附加節點。例如，假設#render是在DOM：

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

v.render(); 

和更新的小提琴http://jsfiddle.net/nikoshr/pCdSy/2/

另一種解決方案將是您的視圖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/用於演示

警告：這真的看起來像一個黑客，可能會產生意想不到的效果。

Answer 2

我解決了它通過創建一個iframe視圖，併爲文本區域帶來小的html代碼。

BT.Common.IframeTextArea = Backbone.View.extend({ 
    tagName: "div", 
    className: "row", 
    template : template('form-input-textarea'), 
    render: function(){ 
     var html = this.template(); 
     this.$el.html(html); 
     return this; 
    } 
}); 

和模板就是：

<script type="text/x-handlebars-template" id="form-input-textarea-template"> 
    <div class="span12"> 
     <iframe src="resources/textArea.html" style="width:100%;height:600px;border:0;padding:0"></iframe> 
    </div> 
</script> 

和textArea.html是：

<script src="js-frameworks/tinymce/tinymce.min.js"></script> 
<script type="text/javascript"> 
tinymce.init({ 
selector: "textarea", 
plugins: [ 
    "advlist autolink lists link image charmap print preview anchor", 
    "searchreplace visualblocks code fullscreen", 
    "insertdatetime media table contextmenu paste" 
], 
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright 
    alignjustify | bullist numlist outdent indent | link image"}); 
    </script> 
    <textarea name="content" style="width:100%"></textarea> 

Answer 3

當渲染（Backbone.View.render）時，el尚未插入到dom中。而且，當視圖的el被插入到dom中的時刻是不可能的。但可以肯定的是，在當前瀏覽器進程結束時，el會被插入到DOM中。然後tinyMCE將會「可初始化」。只需用 「setTimeout的」 等待1毫秒：

var FormTextArea = Backbone.View.extend({ 
    template : _.template('<%=value%>'), 
    tagName: 'textarea', 
    className: "control-group", 
    render: function(){ 
     this.$el.html(this.template(this.model.toJSON())); 
     setTimeout(_.bind(this.initMCE, this), 1); 
     return this; 
    }, 
    initMCE: function(){ 
     tinymce.init({selector: 'textarea'}); 
    } 
}); 

var v = new FormTextArea({ 
    model: new Backbone.Model({value: '<h2>Heading 2</h2><p>A paragraph here</p>'}) 
}); 

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

的的jsfiddle：

http://jsfiddle.net/pCdSy/10/