在 tinymce 编辑器中从 onchange_callback 访问主干模型

Question

我正在使用带有主干视图的 tinymce 编辑器。对于其他表单字段，我将更改事件绑定到使模型与表单更改保持同步的函数：

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

问题在于 tinymce 编辑器有效地替换了它绑定到的底层文本区域，因此在更新编辑器内容时不会触发任何更改事件。为了尝试以与上述类似的方式解决此问题，我将另一个函数绑定到 tinymce 更改事件：

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

我 synchModelWysiwyg 我尝试使用 this 表示法从主干视图访问模型，即使在绑定之后也不成功：

  this.model.set(name, value);

我什至尝试将方法添加到视图中的 bindAll：

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

无论如何，似乎因为 tinymce 正在触发 synchModelWysiwyg 方法而不是主干，所以“this”并没有像我想要的那样被绑定。

关于如何在 synchModelWysiwyg 方法中获取视图的“this”句柄有什么建议吗？

我的回退是在保存时收集所有所见即所得的值，但我试图避免这种情况以保持一致。

Answer 1

我假设您的代码示例在视图的render 方法中。如果是，那么我建议为视图的上下文设置一个变量，并在onchange_callback 函数中使用该变量。

下面是一些示例代码：

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