Knockout自定义绑定不会't更新
Knockout Custom binding doesn't update
我使用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);
}
}
}
};
对于第一个选择,更新部分只调用一次。选择新的文本批不会触发警报。为什么?
小提琴手:http://jsfiddle.net/Wf7xk/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/
相关文章:
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- LinkedIn共享链接图片未使用自定义url更新
- 使用Knockout自定义绑定更新JSTree
- 动态更新Angular2指令中自定义属性的值
- 在 magento 中使用多个价格,但在更改自定义选项时不会更新
- 使用JavaScript更新自定义设置-Salesforce
- Knockout自定义绑定不会't更新
- Netsuite脚本-更新自定义可用数量字段//位置=仓库
- 自定义指令中的ng类不观察更新
- 自定义选择框-选择选项时占位符中的数据图标未正确更新
- angularjs:自定义直接中的绑定数据在使用“”后不再更新;track-by-;在ng重复中
- 当我从有界数据派生输出时,为什么我的自定义指令不更新
- Magento 1.9.2-更新自定义属性'delivery_time'在可配置的产品过程中
- 在媒体窗口中选择图片后添加/更新自定义字段(WordPress)
- 在节点 js 中创建自定义事件并更新自定义对象
- 更新自定义指令的控制器中的$scope时,Angular.js双向绑定不起作用
- 从选择绑定中删除数据绑定没有更新自定义事件
- 使用Grunt更新自定义任务
- 3 .js顶点位置不更新自定义着色器
- 在 jquery 中更新自定义数据属性名称