15

オブザーバブルを編集可能な div テキスト コンテンツにバインドするにはどうすればよいですか?

4

2 に答える 2

35

編集したdivのコンテンツをオブザーバブルに書き戻すことができるように、デフォルトの「テキスト」バインディングを変更する必要があります。このタスクの単純なカスタムバインディングハンドラは、次のようになります。

ko.bindingHandlers.editableText = {
    init: function(element, valueAccessor) {
        $(element).on('blur', function() {
            var observable = valueAccessor();
            observable( $(this).text() );
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).text(value);
    }
};

ただし、このサンプルコードにはjQueryが必要であることに注意してください。

使用法はこれと同じくらい簡単です：

<div contentEditable="true" data-bind="editableText: foo"></div>

次に例を示します（CoffeeScriptで記述）：http：//jsfiddle.net/aBUEu/1/

于 2012-07-12T09:40:18.773 に答える
4

編集可能な div のテキストを変更しても、モデルの値を更新するイベントが発生しないため、デフォルトではこれを行うことはできません。

これにはカスタム バインディングが必要です。ここでそれについて読むことができます: http://knockoutjs.com/documentation/custom-bindings.html

于 2012-07-12T09:28:12.960 に答える