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

回答

相關問題