Question

<select data-bind="options: vm.BusinessStatus, optionsText: 'vcrStatus', optionsValue: 'intStatusID', value: CurrentStatus ">

vm.CurrentStatus.subscribe(function (newValue) {
    alert("the new value is " + newValue);
});

   self.BusinessStatus = ko.observableArray([{ "intStatusID": "2", "vcrStatus": "Provis" }, { "intStatusID": "1", "vcrStatus": "Active" }, { "intStatusID": "3", "vcrStatus": "Negative" }, { "intStatusID": "4", "vcrStatus": "Active (Verified)" }])

当页面加载并且正在填充选择时，警报将为每个选项触发警报，它最终会绑定到该值。我希望在用户将当前状态更改为其他状态时触发事件，并且还限制用户在ui上选择状态但不停止下拉列表绑定到此状态（如果这是数据库中的内容）。我添加了选项，因为数据最终将来自数据库，但目前在示例中也是如此。

Answer 1

我认为你应该使用KO订阅逻辑的beforeChange选项（参见documentation）。

假设您的视图模型如下所示：

function ViewModel() {
    var self = this;
    self.availableStatuses = ko.observableArray(["New", "In progress", "Fixed", "Verified"]);
    self.currentStatus = ko.observable("New");
    self.oldStatus = self.currentStatus();
    self.currentStatus.subscribe(function(oldValue) {
        self.oldStatus = oldValue ;
    }, null, 'beforeChange');
    self.currentStatus.subscribe(function(newValue) {
        if (newValue != "New" && newValue != "In progress") {
            alert("Value " + newValue + " is not allowed!");
            self.currentStatus(self.oldStatus);
        }
    });
}

其中availableStatuses包含数据库中可用状态的数组，currentStatus是具有当前所选状态的可观察数据。您还可以在此处看到2个订阅，第一个在更改currentStatus之前被触发以记住其值，第二个在更改后触发，进行验证并相应地设置值。

Markup看起来像这样：

<select data-bind="options: availableStatuses, value: currentStatus"></select>

以下是demo。

修改

要推迟订阅，直到数据加载为止，您可以执行以下操作：

ViewModel.prototype.init = function() { var self = this; // Let's assume that we made an ajax call to server to get data and in success callback // we populate the data and adding subscriptions. self.availableStatuses(["New", "In progress", "Fixed", "Verified"]); self.currentStatus(self.availableStatuses()[0]); // make subscriptions self.currentStatus.subscribe(function(oldValue) { self.oldStatus = oldValue ; }, null, 'beforeChange'); self.currentStatus.subscribe(function(newValue) { if (newValue != "New" && newValue != "In progress") { alert("Value " + newValue + " is not allowed!"); self.currentStatus(self.oldStatus); } }); }

查看更新的demo。您还可以找到可用于订阅的dispose()方法（请参阅Explicitly subscribing to observables）（例如，当您需要重新加载可用状态时，可以在加载后配置currentStatus订阅并添加新订阅）已经完成了。

绑定选择并阻止用户选择某些选项

1 个答案: