html - HTML5 Contenteditable 字段和淘汰赛：事件在值绑定之前上升

Question

我正在尝试显示绑定到可观察对象的可编辑字段。我使用淘汰赛加上'contenteditable'属性（html5）。编辑字段后，其值应作为 json 字符串发布到服务器。

问题在于将值发布到服务器。我希望上传新编辑的值，但我得到的是旧值而不是它。

这是 jsfiddle 上的问题说明：链接

看法：

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

可编辑文本活页夹：

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