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％的案例无益。

编辑：我强烈推荐this video。它非常出色地支持这一点。

但这是怎么做的：

这一切的本质是对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 } });：

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

您可以通过多种不同的方式使用它：

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

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

-2-（1）的略微变化，但更清晰，是将计算器作为属性放在observable上：

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

-3-创建一个自定义绑定，为您创建计算结果，让您的viewmodel更清晰：

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

您现在可以在输入HTML元素中使用它，如：

{{1}}

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

1 个答案: