Question

我使用TinyMCE Wysiwyg编辑器进行了这种自定义数据绑定，由于某种原因，当我选择新的文本输入时它不会更新。有些东西告诉我，更新可能会破坏绑定只是为了重新初始化它，但我不能让它工作。

ko.bindingHandlers.tinymce = {
  init: function (element, valueAccessor, allBindingsAccessor, context) {
    var options = allBindingsAccessor().tinymceOptions || {};
    var modelValue = valueAccessor();
    var value = ko.utils.unwrapObservable(valueAccessor());
    var el = $(element)

    //handle edits made in the editor. Updates after an undo point is reached.
    options.setup = function (ed) {
      console.log(ed)
      ed.onChange.add(function (ed, l) {
        if (ko.isWriteableObservable(modelValue)) {
          modelValue(l.content);
        }
      });
    };

    //handle destroying an editor 
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      setTimeout(function () { $(element).tinymce().remove() }, 0)
    });

    //$(element).tinymce(options);
    setTimeout(function () { $(element).tinymce(options); }, 0);
    el.html(value);

  },
  update: function (element, valueAccessor, allBindingsAccessor, context) {

    var el = $(element)
    var value = ko.utils.unwrapObservable(valueAccessor());
    var id = el.attr('id')
    alert("Value=" + value);

    //handle programmatic updates to the observable
    // also makes sure it doesn't update it if it's the same. 
    // otherwise, it will reload the instance, causing the cursor to jump.
    if (id !== undefined) {  // Does not work
      var content = tinyMCE.getInstanceById(id).getContent({ format: 'raw' });
      if (content !== value) {
        //el.html(value);
        el.val(value);
      }
    }
  }
};

更新部分仅在第一次选择时调用一次。选择新的文本批处理不会触发警报。为什么呢？

Fiddler：http://jsfiddle.net/Wf7xk/1/

Answer 1

它停止工作，因为更新函数的tinyMCE.getInstanceById(id)行引发了异常。

以下是修复版和简化版：

ko.bindingHandlers.tinymce = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        var options = allBindingsAccessor().tinymceOptions || {};

        function writeModelValue(ed) {
            var modelValue = valueAccessor();
            if (ko.isWriteableObservable(modelValue)) {
                modelValue(ed.getContent());
            }
        }

        //handle edits made in the editor
        options.setup = function (ed) {
            ed.onChange.add(writeModelValue); //on add undo point
            ed.onUndo.add(writeModelValue); //on undo
            ed.onRedo.add(writeModelValue); //on redo
        };

        $(element).tinymce(options);

        //handle destroying an editor 
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tinymce().remove();
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, context) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if(value !== $(element).html()) {
            $(element).html(value);
        }
    }
};

JSFiddle：http://jsfiddle.net/g23Qx/3/

Knockout自定义绑定不会更新

1 个答案: