Javascript 仅当通过路由器移动时，Backbone.js无法加载Tinymce脚本

我正在使用tinymce创建一个富文本区域，并且正在使用backbone.js

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

如果我用指向该路径的直接链接刷新页面，它可以正常工作。我真的不明白什么地方会出错

以下是视图：

模板：

{{lable}}
{{text}}

---

TinyMCE显然不喜欢在分离的节点上工作。一点也不

此设置再现了您的困境：

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

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

还有一把小提琴

一个简单的解决方法是为视图提供一个附加的节点。例如，假设

#render

位于DOM中：

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

v.render();

和最新的小提琴

另一种解决方案是临时将视图

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

演示

---

警告：这看起来像是一个黑客攻击，可能会产生意想不到的结果。

我通过创建Iframe视图并为文本区域提供小的html代码解决了这个问题

模板是：

而textArea.html是：

tinymce.init({
选择器：“文本区域”，
插件：[
“advlist autolink列出链接图像charmap打印预览锚”，
“searchreplace visualblocks代码全屏显示”，
“insertdatetime媒体表上下文菜单粘贴”
],
工具栏：“插入文件撤消重做|样式选择|粗体斜体|左对齐中心对齐右对齐”
alignjustify | bullist numlist outdent indent | link image“}）；

渲染（Backbone.View.render）时，el尚未插入dom中。此外，不可能捕捉到视图的el将插入dom的时刻。但可以肯定的是，在当前浏览器的进程结束时，el将被插入DOM中。然后tinyMCE将是“可初始化的”。只需使用“设置超时”等待1毫秒：

var FormTextArea=Backbone.View.extend({
模板：u.模板（“”），
标记名：“textarea”，
类名：“控制组”，
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
setTimeout（u.bind（this.initMCE，this），1）；
归还这个；
},
initMCE:function（）{
init（{selector:'textarea'}）；
}
});
var v=新FormTextArea({
模型：新主干.model（{value:'heading2A段落此处
'}）
});
$（'body'）.append（v.render（）.el）；

JSFIDLE：

---

您是否检查了控制台部分是否有任何错误无错误。实际上，我试着保存一个实例的记录并再次使用它。也不管用。我用Iframe解决了这个问题。我会写我的答案，因为我实际上没有尝试你的解决方案。这可能很好。我不接受我的回答，我会看看观众怎么说：）

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

v.render();

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

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>

<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>

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