需要一些指南来使用淘汰赛 js 完成任务

Question

我是淘汰赛 js 的新手，并且很抱歉寻求帮助，因为我喜欢的输出我对淘汰赛 js 没有足够的知识。

假设我有三个下拉菜单和一个按钮，假设国家下拉菜单、州下拉菜单和城市下拉菜单和一个按钮。所有下拉菜单都填充了数据。现在我希望默认情况下该按钮将被禁用，但是当用户从任何下拉列表中选择任何数据时，该按钮将被启用。所以逻辑和代码并没有浮现在我的脑海。我需要指南来开发具有淘汰赛绑定的此类程序。

所以请有人分享知识。

一个人告诉我用这种方式完成这项任务。

您有 3 倍的可观察数据 - 州、县和市。它们与dropdowns 绑定。 您将拥有另一个名为“buttonEnabled”的可观察对象，其形式为 var buttonEnabled = ko.observable(false). 使用已启用的绑定将此绑定到您的按钮。

创建一个计算的，纯粹是为了它的副作用。代码将是

ko.computed( function() {

//just so this computed subscribes to those observables
state();
county();
city();

//Prevent this from running when the computed is initialising.
//See http://knockoutjs.com/documentation/computed-reference.html
if (!ko.computedContext.isInitial()) {
  buttonEnabled(true);
}
});

还有其他方法，比如直接在 observables 上使用.subscribe()。

但仍然不明白如何做到这一点。任何帮助，将不胜感激。谢谢

编辑

我只是添加一个文本框和下拉菜单并尝试执行相同的操作，例如如果有人填充文本框然后按钮将被启用，如果有人从文本框中删除文本则按钮将被禁用。

当文本框为空并且放置一些文本时，按钮将被启用，但是当从文本框中删除文本时，按钮假设被禁用，这不会发生。我想代码中缺少一些小东西。所以请告诉我要添加什么。这是我的 jsfiddle 链接http://jsfiddle.net/tridip/r95kc6u5/1/

<input data-bind="value: UserName, valueUpdate: 'afterkeydown'" />
<br /><br />
<select data-bind="options: country, optionsCaption:'--Select Country--', value: selected_country"></select>
<br /><br />
<select data-bind="options: state, optionsCaption:'--Select State--', value: selected_state"></select>
<br /><br />
<select data-bind="options: city, optionsCaption:'--Select City--', value: selected_city"></select>
<br /><br />
<button data-bind="enable: buttonEnabled">Submit</button>

function ViewModel() {
    var self = this;
    self.UserName = ko.observable(null);
    self.state = ko.observableArray(['State 1', 'State 2', 'State 3']);
    self.country = ko.observableArray(['Country 1', 'Country 2', 'Country 3']);
    self.city = ko.observableArray(['City 1', 'City 2', 'City 3']);

    self.selected_state = ko.observable(null);
    self.selected_country = ko.observable(null);
    self.selected_city = ko.observable(null);

    self.buttonEnabled = ko.computed(function () {
        var state = false;
        if (self.selected_state() != null || self.selected_country() != null || self.selected_city() != null || self.UserName()!=null) {
            state = true;
        }
        return state;
    });
}

var vm = new ViewModel();
ko.applyBindings(vm);

Answer 1

下面的代码可让您从 3 个下拉列表之一中选择一个值，然后启用该按钮。

HTML

<select data-bind="options: state, optionsCaption:'States', value: selected_state"></select>
<br />
<select data-bind="options: country, optionsCaption:'Countries', value: selected_country"></select>
<br />
<select data-bind="options: city, optionsCaption:'Cities', value: selected_city"></select>
<br />
<input type="text" data-bind="value: text_value, valueUpdate: 'afterkeydown'" /> // newly added
<br />
<button data-bind="enable: buttonEnabled">Submit</button>

KnockoutJS

function ViewModel() {
    var self = this;

    self.state = ko.observableArray(['State 1', 'State 2', 'State 3']);
    self.country = ko.observableArray(['Country 1', 'Country 2', 'Country 3']);
    self.city = ko.observableArray(['City 1', 'City 2', 'City 3']);

    self.selected_state = ko.observable(null);
    self.selected_country = ko.observable(null);
    self.selected_city = ko.observable(null);
    self.text_value = ko.observable(''); // newly added

    self.buttonEnabled = ko.computed(function () {
        var state = false;
        // new value added to check (self.text_value)
        if (self.selected_state() != null || self.selected_country() != null || self.selected_city() != null || self.text_value() != '') {
            state = true;
        }
        return state;
    });
}

var vm = new ViewModel();
ko.applyBindings(vm);

谢谢