KnockoutJSのcontenteditableバインディング

Question

現在、カスタムのKnockoutJSバインディングを実装して、divをcontenteditableにすることを試みています。例として、私が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); 
    } 
}; 

今のところ、要素とCSSクラスにcontenteditable属性を追加しています。

編集モードの開始と終了はうまくいきます。まだ欠落していることの1つは、コンテンツ編集可能な要素を編集した後にviewModelが更新されることです。

編集可能な要素と同期してビューモデルを取得するにはどうすればよいですか？独自のカスタム "text："バインディングが必要か、それとも簡単な方法がありますか？

Answer 1

私はKOベースのコンテンツ編集可能なバインディング+エディタを作成しましたが、これはおそらくインスピレーションを得ることができます。

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

は、この情報がお役に立てば幸いです。