我是全新的淘汰自定义绑定,我正在尝试将ckeditor与淘汰赛结合,我从Google搜索获得以下绑定,
ko.bindingHandlers.wysiwyg = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var value = valueAccessor();
var valueUnwrapped = ko.unwrap(value);
var allBindings = allBindingsAccessor();
var $element = $(element);
$element.attr('contenteditable', true);
if (ko.isObservable(value)) {
var isSubscriberChange = false;
var isEditorChange = true;
$element.html(value());
var isEditorChange = false;
$element.on('input, change, keyup, mouseup', function () {
if (!isSubscriberChange) {
isEditorChange = true;
value($element.html());
isEditorChange = false;
}
});
value.subscribe(function (newValue) {
if (!isEditorChange) {
isSubscriberChange = true;
$element.html(newValue);
isSubscriberChange = false;
}
});
}
}
}
我有以下代码要绑定,
$(function () {
$.getJSON("/getdata", function (data) {
ko.applyBindings({
testList: [{
test: ko.observable()
},
{
test: ko.observable()
}]
}, document.getElementById('htmled'));
});
});
HTML如下
<div id="htmled" data-bind="foreach:testList">
Data
<div class="editor" data-bind="wysiwyg: test">Edit this data</div>
</div>
当我在$ .getJSON方法之外调用ko.applyBindings时,绑定工作并显示工具栏。但是当我在里面调用applyBindings时,工具栏没有出现。任何人都可以帮我吗?我肯定会遗漏一些东西,非常感谢任何帮助。
Jsfiddle添加
工作:http://jsfiddle.net/jogejyothish/h4Lt3/1/ 不工作:http://jsfiddle.net/jogejyothish/Se8yR/2/
Jyothish
答案 0 :(得分:0)
CKEditor需要一些时间来加载。
在你的第一个例子中,它在ko应用后加载,这很好。
在第二个例子中,它在ko适用之前加载。问题是CKEditor会查找您使用ko设置的contenteditable
属性,因此不会创建编辑器。
您可以使用以下方式手动创建:
CKEDITOR.inline(element).setData(valueUnwrapped || $element.html());
答案 1 :(得分:0)
发生了什么:
为了解决这个问题,您需要在ajax成功函数中添加一些代码来手动初始化CKEditors,例如:
$(".editor").each(function(idx, el) {
CKEDITOR.inline(el)
});
在这里,你的小提琴工作:
您的工作版本工作的原因是因为绑定应用于document.ready,因此KO及时呈现两个div元素,并且CKEditor成功应用于它们。