Knockout.js - 只在ajax保存后更新observable？

Question

我看了一遍,无法真正找到解决问题的优雅方案......

<div class="viewPerson">
     <strong>Name:</strong> <span data-bind="text: Person.Name"></span>
</div>

<div class="editPerson">
    <strong>Name:</strong> <input type="text" data-bind="value: Person.Name">  </span>
    <input type="submit" value="Save" data-bind="click: Save" />
</div>

我在一个页面(Knockout 2.2.1)上有两个数据绑定用于同一个字段(Name),一个在我的"View Div"中,一个在我的"Edit Div"中.有没有一种简单的方法让我说不要更新"View Div",直到它被保存回数据库.

这是jsfiddle中的一个例子http://jsfiddle.net/NoseBagUK/bvw4j/3/

到目前为止,我所拥有的最好的方法是拥有Person对象的两个副本,一旦ajax魔法发生,我就有了一个同步两个Person对象的函数.喜欢这个.. http://jsfiddle.net/NoseBagUK/jjK4j/1/

任何帮助非常感谢.

菲尔

Answer 1

我实际上建议您立即更新viewmodel并在ajax调用失败时撤消该更改.这将使您的应用程序看起来更快 - 因为90%以上的ajax调用有望成功,所以编码10%的案例的好处是没有意义的.

编辑:我强烈推荐这个视频.它非常出色地支持这一点.

但这是怎么做的:

这一切的本质是拦截computed你originalObservable:

ko.computed({
    read: function() {
        return originalObservable();
    },
    write: function( newVal ) {
        // perform ajax call
        $.post( '<url>' , { data: originalObservable() } , function() {
            // in your success callback
            // update your observable
            originalObservable( newVal );
        });
        // note: we get to this point without updating the originalObservable
        //       because this is part of the synchronous code
        //       where as the ajax call will, of course, be asynchronous
    }
});

您可以使用这种方式有很多种:

-1-在您的viewmodel上作为单独的属性并将您的编辑html绑定到此

function Viewmodel() {
    this.original = ko.observable();
    this.editable: ko.computed( /* as above */ );
}

-2-(1)的略微变化,但更清晰,是将计算器作为属性放在可观察量上:

function Viewmodel() {
    this.original = ko.observable();
    this.original.editable: ko.computed( /* as above */ );
}

-3-创建一个自定义绑定,为您创建计算结果,使您的viewmodel更清晰:

ko.bindingHandlers.myAjaxSave = {
    init: function( element, valueAccessor ) {
        var originalObservable = valueAccessor();
        var editable = ko.computed({
            read: function() {
                return originalObservable();
            },
            write: function( newVal ) {
                // perform ajax call
                $.post( '<url>' , { data: originalObservable() } , function() {
                    // in your success callback
                    // update your observable
                    originalObservable( newVal );
                });
                // note: we get to this point without updating the originalObservable
                //       because this is part of the synchronous code
                //       where as the ajax call will, of course, be asynchronous
            }
        });

        // this applies the binding to the HTML element
        ko.applyBindingToNode( element , {
            value: editable
        });
    }
}

您现在可以在输入HTML元素中使用它,如:

<input data-bind="myAjaxSave: Person.Name" />