CODEWITHSUNDEEP
backbone.jstinymcebackbone-eventsbackbone-views
Conor Power
Conor Power

Reputation: 726

Accessing the backbone model from the onchange_callback in tinymce editor

I am using the tinymce editor with a backbone view. For other form fields I am binding the change event to a function which keeps the model synchronized with changes to the form:

events: {
        "change input":  "synchModel",
        "change textarea":  "synchModel",
        "change select":  "synchModel"                                              
    }

the problem is that the tinymce editor effectively replaces the underlying textarea it is bound to so no change events are fired when the editor contents are updated. To try to solve this in a similar way to the above I have another function bound to the tinymce change event:

$(el).find('.wysiwyg').tinymce({
            // Location of TinyMCE script
            script_url : 'tiny_mce.js',
            theme : "simple",
            onchange_callback : "synchModelWysiwyg"
        });

I synchModelWysiwyg I try unsuccessfully to access the model from backbone view using the this notation even after binding :

  this.model.set(name, value);

I even tried adding the method to the bindAll in the view:

_.bindAll(this, 'render', 'synchModelWysiwyg')

Anyway, it seems that because tinymce is firing the synchModelWysiwyg method rather than backbone the "this" does not get bound as I'd like it.

Any suggestions as to how to get a handle on the "this" for the view in the synchModelWysiwyg method?

My fall back is to collect all the wysiwyg values on save but I'm trying to avoid this to keep it consistent.

Upvotes: 3

Views: 1269

Answers (1)

Paul
Paul

Reputation: 18597

I assume your code sample is in the view's render method. If it is, then I would recommend setting a variable to the context of the view, and using that variable in the onchange_callback function.

Here's some example code:

// set the view's context to the self variable
var self = this;
$(el).find('.wysiwyg').tinymce({
  // Location of TinyMCE script
  script_url : 'tiny_mce.js',
  theme : "simple",
  onchange_callback : function(args) {
    // self references the view
    self.synchModelWysiwyg(args)
  }
});

Upvotes: 1

Related Questions