HTML5 Contenteditable字段和淘汰:事件在值绑定之前上升

时间:2013-01-04 16:54:51

标签: html5 knockout.js contenteditable

我正在尝试显示绑定到observable的可编辑字段。我使用knockout加'contenteditable'属性(html5)。编辑字段后,其值应作为json字符串发布到服务器。

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

以下是jsfiddle问题的说明:link

查看:

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

editableText binder:

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

0 个答案:

没有答案