html - HTML5 Contenteditable フィールドとノックアウト: 値バインディングの前にイベントが発生します

Question

オブザーバブルにバインドされた編集可能なフィールドを表示しようとしています。ノックアウト プラス 'contenteditable' プロパティ (html5) を使用します。フィールドを編集した後、その値を json 文字列としてサーバーに送信する必要があります。

問題は、サーバーにポストされる値にあります。新しく編集した値をアップロードすることを期待していますが、代わりに古い値を取得しています。

これはjsfiddleの問題の図です:リンク

意見：

<h2 contenteditable="true" data-bind="editableText: title, event: { change: valueChanged }"></h2>

editableText バインダー:

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);
}};

「変更」イベント トリガー:

 $('[contenteditable]').live('focus', function() {
                var $this = $(this);
                $this.data('before', $this.html());
                return $this;
            }).live('blur paste', function() {
                var $this = $(this);
                if ($this.data('before') !== $this.html()) {
                    $this.data('before', $this.html());
                    $this.trigger('change');
                }
                return $this;
            }).live('keypress', function(e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 13) {
                    var $this = $(this);
                    if ($this.data('before') !== $this.html()) {
                        $this.data('before', $this.html());
                        $this.trigger('change');
                    }
                    e.preventDefault();
                }
                return $this;
            });