我能够通过下面列出的示例获得knockoutjs来创建时序编辑器:
问题是当我试图在editableAreas observableArray中更新底层可观察对象时。视图模型更新了,但是,这些更改没有反映在UI中。这里有一个演示我正在尝试做的事情:http://jsfiddle.net/rsparkyc/DQ93k/2/
javascript:
/*tinymce-knockout-binding v1.0.2|(c) 2014 Michael Papworth|https://raw.github.com/michaelpapworth/tinymce-knockout-binding/master/LICENSE*/
!function(a,b){b.bindingHandlers.wysiwyg={extensions:{},init:function(c,d,e,f,g){if(!b.isWriteableObservable(d()))throw"valueAccessor must be writeable and observable";var h=e.has("wysiwygConfig")?e.get("wysiwygConfig"):{},i=e.has("wysiwygExtensions")?e.get("wysiwygExtensions"):[],j={browser_spellcheck:a(c).prop("spellcheck"),plugins:["link","paste"],toolbar:"undo redo | bold italic | bullist numlist | link",menubar:!1,statusbar:!1,setup:function(a){a.on("change keyup nodechange",function(c){d()(a.getContent());for(var f in i)b.bindingHandlers.wysiwyg.extensions[i[f]](a,c,e,g)})}};j=a.extend(j,h),a(c).text(d()()).tinymce(j),b.utils.domNodeDisposal.addDisposeCallback(c,function(){a(c).tinymce().remove()})},update:function(a,c,d,e,f){return b.bindingHandlers.value.update(a,c,d,e,f)}}}(jQuery,ko),function(a){a.extensions.dirty=function(a,b,c,d){if(c.has("wysiwygDirty")){var e=c.get("wysiwygDirty");if(!ko.isWriteableObservable(e))throw"wysiwygDirty must be writeable and observable";e(a.isDirty())}else d.$root.isDirty=a.isDirty()}}(ko.bindingHandlers.wysiwyg),function(a){a.extensions.wordcount=function(a,b,c,d){var e=a.plugins.wordcount;if(e&&c.has("wysiwygWordCount")){var f=c.get("wysiwygWordCount");if(!ko.isWriteableObservable(f))throw"wysiwygWordCount must be writeable and observable";f(e.getCount())}}}(ko.bindingHandlers.wysiwyg);
//# sourceMappingURL=wysiwyg.min.map
function ViewModel() {
var self = this;
self.timesChanged = 0;
self.editableAreas = ko.observableArray([{
id : 1,
txt: ko.observable('first text area')
},{
id : 2,
txt: ko.observable('second text area')
},{
id : 3,
txt: ko.observable('all observable text area')
}]);
self.wysiwygOptions = {
schema: 'html5',
inline: true,
toolbar: 'bold italic underscore',
menubar: false
};
self.changeText = function() {
self.timesChanged++;
self.editableAreas()[0].txt('<p>this text has changed ' + self.timesChanged + ' times</p>');
}
}
ko.applyBindings(new ViewModel());
这里是HTML:
In the paragraph below you can edit your html. Knockout with textarea bindings
<div data-bind="foreach: editableAreas">
<div class="editableArea" data-bind="wysiwyg: txt, wysiwygConfig: $parent.wysiwygOptions "></div>
</div>
<div>
<h3>Non-editable area with same data</h3>
<div data-bind="foreach: editableAreas">
<div data-bind="text: txt"></div>
</div>
</div>
<button data-bind="click:changeText">Change Text!</button>
首先,我想感谢您决定使用我的绑定。我注意到你使用的是1.0.2版本,这个问题已经解决了。我可以建议您将绑定更新到最新版本(v1.1.1)吗?
看来wysiwyg插件没有订阅可观察的change事件。另一种方法是刷新observableArray…
不幸的是,knockout"valueHasMutated"函数对于强制UI更新似乎并不可靠。这里有一个肮脏的解决方法:
当项不是可观察项时刷新observableArray
基本上修复是添加这一行后,你的变化到你的观察…
var data = self.array();self.array(null);self.array(data);