对KnockoutJS的可信绑定

Question

我目前正在尝试实现一个自定义的KnockoutJS绑定,以使div满足.作为一个例子,我将从knockoutJS的第一个教程中获取ViewModel并添加"编辑模式"-flag:

JSBin:http://jsbin.com/ejugip/3/edit

ViewModel代码:

function HelloWorldViewModel() {
    var self = this;
    self.isInEditMode = ko.observable(true);
    self.firstName = ko.observable('Bert');
    self.lastName = ko.observable('Berntington');
    self.fullName = ko.computed(function () {
        return self.firstName() + ' ' + self.lastName();
    });
}

查看代码:

<fieldset id="HelloWorldView">  
    <legend>Hello World</legend>
    <p><input type="checkbox" data-bind="checked: isInEditMode" /> edit mode</p>
    <label>First name:</label>
    <div data-bind="contenteditable: isInEditMode, text: firstName"></div>
    <label>Last name:</label>
    <div data-bind="contenteditable: isInEditMode, text: lastName"></div>
    <label>Full name:</label>
    <div data-bind="text: fullName"></div>
</fieldset>

到目前为止,这是我的绑定处理程序代码:

function makeEditable(element, editable) {
    $(element).attr('contenteditable', (editable) ? true : false);
    $(element).removeClass('Editable');
    if (editable) {
        $(element).addClass('Editable');
    }
}

ko.bindingHandlers.contenteditable = {
    init: function (element, valueAccessor) {},
    update: function (element, valueAccessor) {
        var editable = ko.utils.unwrapObservable(valueAccessor());
        makeEditable(element, editable);
    }
};

现在,我只是将contenteditable属性添加到元素和css类中.

因此进入和离开编辑模式工作正常.还有一件事是,在编辑了contenteditable元素之后,viewModel会更新.

使viewmodel与我的可编辑元素同步的最佳方法是什么？我是否需要自定义的"text:"绑定,还是有更简单的方法？

Answer 1

前段时间我创建了一个基于KO的contenteditable binding plus编辑器,你可以从中获得灵感.

https://github.com/madcapnmckay/Knockout-UI/blob/master/js/ui-editor.js

希望这可以帮助.