У меня есть настраиваемая привязка данных с помощью редактора 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/
Он перестает работать, потому что исключение 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/