如何在使用knockout之前检查输入框值是否已更改

Question

这是我创建的简单 fiddle。它使用敲除并创建了一个简单的输入框和按钮

<form>
    <p>Login name:
        <input data-bind="textInput: userName" />
    </p>
    <button data-bind="click: Onclick">Save</button>
</form>

ko.applyBindings({
    userName: ko.observable("abcd"),
    Onclick: function () {
        // add an alert if value has changed or do nothing. 
        // tried adding the alert but it didnt fire with the value in the input box

    }
});

我正在尝试 knockout 中的场景，如果输入框的值没有改变，那么点击保存就没有效果。

但是，如果输入框的值已更改，则在单击“保存”时会执行一个操作，比如触发一个警告框。

我的问题主要是：

如何回溯输入框之前的值它会更新。
我这样做主要是为了提高效率在我们的系统中，如果有的话，不要往返数据库没有变化

有什么建议或帮助吗？

Answer 1

Knockout 已经进行了更改跟踪，您只需点击它即可。订阅 userName 并设置 dirty 标志。服务器更新成功后重置标志，如下所示：

function ViewModel () {
    var self = this;

    // data
    self.userName = ko.observable("abcd");
    self.dirty = ko.observable(false);

    // subscriptions
    self.userName.subscribe(function () {
        self.dirty(true);
    });

    // API
    self.saveChanges = function () {
        if (!self.dirty()) return;

        $.post("url", {
            userName: self.userName()
        }).done(function () {
            self.dirty(false);
        });
    });
}

ko.applyBindings(new ViewModel());

现在您甚至可以将“保存”按钮的 "enabled" 状态绑定到该标志。

<form>
    <p>Login name: <input data-bind="textInput: userName" /></p>
    <button data-bind="click: saveChanges, enabled: dirty">Save</button>
</form>

重要说明 由于 dirty 标志的全局性质，您应该在保存过程中锁定视图。否则，理论上用户可以进行其他更改，但是当 previous 状态 returns 的 saveChanges 进程时脏标志被重置并且用户实际上失去了能力保存他们的新更改。

你可以在 updating 标志的帮助下做到这一点：

self.dirty = ko.observable(false);
self.updating = ko.observable(false);

self.saveChanges = function () {
    if (!self.dirty()) return;

    self.updating(true);
    $.post("url", {
        userName: self.userName()
    }).done(function () {
        self.dirty(false);
    }).always(function () {
        self.updating(false);
    });
});

您可能希望使用该标志来显示 "saving..." 叠加层，或者只是将其用作页面上每个输入元素的 data-bind="disabled: updating"。

如果您的模型中有许多属性会导致 dirty 状态，并且您不想用许多订阅污染您的视图模型，您可以使用扩展器来完成这项工作：

ko.extenders.dirtyTrack = function (target, dirtyObservable) {
    target.subscribe(function () {
        dirtyObservable(true);
    });
    return target;
};

在你看来

// data
self.dirty = ko.observable(false);
self.userName = ko.observable("abcd").extend({dirtyTrack: self.dirty});
self.oherField = ko.observable("foo").extend({dirtyTrack: self.dirty});

如何在使用knockout之前检查输入框值是否已更改

How to check if the input box value has changed before it using knockout

html

javascript

jquery

knockout.js