javascript - Backbone.js fails to load Tinymce script only when moving through the router -

i using tinymce create rich textarea, , using backbone.js.

the problem when move "page" in router previous url on same site, doesn't work.

if refresh page direct link route works fine. don't understand can go wrong.

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

the template:

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

tinymce apparently doesn't work on detached nodes. @ all.

this setup reproduces predicament:

var v = new bt.common.formtextarea({     model: new backbone.model({text: 'init'}) });  v.render().$el.appendto('body'); 

and accompanying fiddle http://jsfiddle.net/nikoshr/pcdsy/

a simple workaround provide view attached node. example, assuming #render in dom:

var v = new bt.common.formtextarea({     model: new backbone.model({text: 'init'}),     el: '#render' });  v.render(); 

and updated fiddle http://jsfiddle.net/nikoshr/pcdsy/2/

another solution temporarily add view el dom, apply tinymce , detach it.

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

warning : looks hack , might produce unexpected results.