要素が contentEditable かどうかを切り替えるカスタム バインディング ハンドラーを作成しました。また、要素のコンテンツが編集されたときに html バインディングを更新するようにしたいので、入力イベントをリッスンし、利用可能な場合は html バインディングを更新します。
ko.bindingHandlers.contentEditable = {
update: function (element, valueAccessor, allBindingsAccessor) {
var value = ko.unwrap(valueAccessor());
element.contentEditable = value;
var $element = $(element);
if (value) {
var allBindings = allBindingsAccessor();
var htmlBinding = allBindings.html;
if (ko.isWriteableObservable(htmlBinding)) {
$element.on("input", function (event) {
htmlBinding(element.innerHTML);
});
}
} else {
$element.off("input");
}
}
};
ただし、ここに問題があります。
- ユーザーが要素に何かを入力します
- 入力イベントが発火する
- HTMLバインディングが更新されました
- 要素の innerHTML が更新されます
- 要素内のカーソル位置が先頭に戻ります
jsfiddle は千の言葉を言います... http://jsfiddle.net/93eEr/1/
これを正確に処理する方法については、少し困惑しています。