Пользовательская привязка нокаута не обновляется

0

У меня есть настраиваемая привязка данных с помощью редактора 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 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);
      }
    }
  }
};

Раздел обновления вызывается только один раз для первого выбора. Выбор новой текстовой партии не вызывает предупреждение. Зачем?

Скрипач здесь: http://jsfiddle.net/Wf7xk/1/

Теги:
data-binding
knockout.js
tinymce

1 ответ

1
Лучший ответ

Он перестает работать, потому что исключение tinyMCE.getInstanceById(id) в 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/

  • 0
    Спасибо @LostInComputer! Так просто. Так гениально! :)
  • 0
    Кажется, однако, что редактирование действует немного странно. При форматировании BOLD / Italic / Underline (возможно больше) и использовании клавиш со стрелками влево / вправо курсор переходит к началу текста. Чего-то не хватает в части инициализации?
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню