contenteditable绑定为KnockoutJS

我目前正试图实现一个自定义KnockoutJS绑定，使div contenteditable。举个例子，我在第一篇教程走在视图模型和knockoutJS添加一个 “编辑模式” -flag：contenteditable绑定为KnockoutJS

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

视图模型代码：

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：”绑定，还是有更简单的方法？

来源

2012-04-24 terabaud

This thread：https://groups.google.com/d/topic/knockoutjs/Mh0w_cEMqOk/discussion and this fiddle：http://jsfiddle.net/rniemeyer/JksKx/可能有帮助。 – 2012-04-24 13:21:36

前段时间我创建了一个基于KO的contenteditable绑定加编辑器，您可以从中获得灵感。

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

希望这有助于。

来源

2012-04-24 19:18:40 madcapnmckay

哇，很好的github项目=） – terabaud 2012-04-25 14:57:00

谢谢。这有点被忽视，真的需要找点时间来更新它并整理它。 – madcapnmckay 2012-04-25 15:17:42

尽管它有点被忽视，但了解更多关于如何使用基因敲除的自定义绑定处理程序是一个很好的开始。我仍然是一个koJS新手:) – terabaud 2012-04-25 15:27:23

contenteditable绑定为KnockoutJS

回答

相关问题