javascript - Summernote + Knockoutjs 编辑器在更新 observable 值后未更新

Question

我有针对 Summernote 的 knockoutjs 自定义绑定(bind)，如下所示:

<script>
        ko.bindingHandlers.summernote = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                var value = ko.unwrap(valueAccessor());
                var $element = $(element);
                $element.html(value).summernote({
                    onChange: function (contents) {
                        valueAccessor()(contents);
                    }
                });
            },
            update: function (element, valueAccessor) {
                var $element = $(element);
                $element.summernote('code',ko.utils.unwrapObservable(valueAccessor()));

            }
        };
    </script>

<div class="html-editor" data-bind="summernote: PublishNote"></div>

self.PublishNote = ko.observable();

一切正常，但不适用于从 js 更新可观察值。 如果我初始化self.PublishNote = ko.observable('Hello'); 。但如果我将可观察变量更新为 self.PublishNote('<h1>Hello World</h1') 。编辑器未更新。

请帮助我们完成这个 ko-summernote 所以它可以像这样从js代码更新编辑器 self.PublishNote('<h1>Hello World</h1')

var ViewModel = function () {
            var self = this;
            self.Id = '1';
            self.PublishNote = ko.observable('initial value');
            setTimeout(function(){
              self.PublishNote('<h1>Hello World</h1'); //not work
            }, 1000);

            self.Submit = function () {
                var dataToSend = {
                    PublishNote: self.PublishNote())
                };
                $.post('@Url.Action("Edit")', dataToSend)
                .success(function (res) {
                    console.log(res);
                })
                .fail(function (err) {
                    console.log(err);
                })
            }

            self.Init = function () {
                $.post('@Url.Action("InitEdit")', {
                    id: self.Id
                })
                .success(function (res) {
                    self.PublishNote(res); //not work
                })
                .fail(function (err) {
                    console.log(err);
                })
            }
        }
        var vm = new ViewModel();
        ko.applyBindings(vm);
        vm.Init();

<div class="html-editor" data-bind="summernote: PublishNote"></div>

Answer 1

通常，自定义绑定(bind)使用配置选项作为参数来初始化封装的插件(本例中为 Summernote)。

在示例中，参数 allBindingsAccessor 用于获取 SummerNote 的配置对象，该对象将高度设置为 300px(如果不需要自定义配置，则只需使用 true)。在“summernote.change”事件上注册回调。此回调使用 allBindings 参数来访问“value”绑定(bind)中使用的可观察对象并更新其值。

这样，您可以根据需要通过删除绑定(bind)来打开/关闭绑定(bind)，并且可观察值仍然有效。您可以通过单击编辑器底部的按钮来检查可观察值中的当前值。

ko.bindingHandlers.summernote = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var allBindings = allBindingsAccessor();

        // initialize summernote with config from binding
        var summernoteConfig = ko.utils.unwrapObservable(allBindings.summernote);
        summernoteConfig = (typeof summernoteConfig === 'object') ? summernoteConfig : {}
        $(element).summernote(summernoteConfig);
        $(element).summernote('code', allBindings.value());

        // callback to update value observable
        $(element).on('summernote.change',  function(we, contents, $editable) {
            allBindings.value(contents);
        });
    }
};

var ViewModel = function() {
    var self = this; 

    self.PublishNote = ko.observable("INITIAL CONTENTS");
    self.ShowContents = function() {
        alert(self.PublishNote());
    }
};

ko.applyBindings(new ViewModel());

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>

<!-- knockout -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"type="text/javascript"></script>

<!-- HTML -->
<div class="html-editor" data-bind="value: PublishNote, summernote: { height: 300 }"></div>
<button data-bind="click: ShowContents">Show Contents</button>