KnockoutJS select 选项值

Question

我正在尝试使用 KnockoutJS

根据另一个 select HTML 元素的值禁用一个 select HTML 元素

HTML 该部分的代码如下：

<label for="searchBy">Search by:</label>
<select id="searchBy" name="searchBy" tabindex="1" data-bind="options: searchBy, value: selectedSearchBy, optionsText: 'searchBy', optionsValue: 'searchBy'"></select>

<label for="searchMethod">Search method:</label>
<select id="searchMethod" name="searchMethod" tabindex="2" data-bind="options: searchMethod, value: selectedSearchMethod, optionsText: 'searchMethod', optionsValue: 'searchMethod', disable: searchByDOB"></select>

和相关的 KonckutJS 代码：

this.searchByDOB = ko.observable(false);

this.searchBy = ko.observableArray([{searchBy: 'Name', value: 'name'},{searchBy: 'Date of Birth', value: 'dob'},{searchBy: 'User ID', value: 'id'}]);

this.selectedSearchBy = ko.observable();
this.searchMethod = ko.observableArray([{searchMethod: 'beginning with', value: 's%'},{searchMethod: 'containing', value: '%s%'},{searchMethod: 'ending with', value: '%s'}]);
this.selectedSearchMethod = ko.observable();

this.selectedSearchBy.subscribe(function(latest) {
  console.log("Search by: " + this.selectedSearchBy().value);
    if(this.selectedSearchBy().value == 'dob')
    {
      this.searchByDOB = ko.observable(true);
    }

}, this);

但我得到的是 this.selectedSearchBy().value 是 undefinied

我错过了什么？我应该将逻辑更改为 on change 事件吗？

Answer 1

您的订阅第一次触发是在页面加载时立即触发，因此还没有选择。 selectedSearchBy 就像它说的那样是未定义的，因此您不能对其调用“.value”。

您可以为 selectedSearchBy 提供一个与您的 searchBy 数组中的选项之一相匹配的默认值，或者您可以在调用 .value 之前检查 selectedSearchBy 的值。

this.selectedSearchBy.subscribe(function(latest) {
    if(this.selectedSearchBy() && this.selectedSearchBy().value == 'dob')
    {
      this.searchByDOB = ko.observable(true);
    }
}, this);

Answer 2

没有.value属性；正是这个给出了未定义的错误。

只需通过 this.selectedSearchBy() 读取值。

还通过 this.searchByDOB(true) 写入属性而不是赋值。

编辑

subscribe 方法必须同时包含 enable this.searchByDOB(true) 和 disable this.searchByDOB(false) 语句，否则下拉列表会在禁用后保持禁用状态。

此外，仅通过 (this.selectedSearchBy() === 'dob') 进行检查就足够了。
（更喜欢 === 而不是 ==，尽管这里没有区别。）

function ViewModel()
{

    this.searchByDOB = ko.observable(false);

    this.searchBy = ko.observableArray([
        {searchBy: 'Name', value: 'name'},
        {searchBy: 'Date of Birth', value: 'dob'},
        {searchBy: 'User ID', value: 'id'}
      ]);

    this.selectedSearchBy = ko.observable();
    
    this.searchMethod = ko.observableArray([
        {searchMethod: 'beginning with', value: 's%'},
        {searchMethod: 'containing', value: '%s%'},
        {searchMethod: 'ending with', value: '%s'}
        ]);
        
    this.selectedSearchMethod = ko.observable();

    this.selectedSearchBy.subscribe(function(latest) {
        var isSearchByDob = (this.selectedSearchBy() === 'dob');        
        this.searchByDOB(isSearchByDob);
        }, this
        );
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<label for="searchBy">Search by:</label>
<select id="searchBy" name="searchBy" tabindex="1" data-bind="options: searchBy, value: selectedSearchBy, optionsText: 'searchBy', optionsValue: 'value'"></select>

<label for="searchMethod">Search method:</label>
<select id="searchMethod" name="searchMethod" tabindex="2" data-bind="options: searchMethod, value: selectedSearchMethod, optionsText: 'searchMethod', optionsValue: 'value', disable: searchByDOB"></select>

Answer 3

嗯，可行的解决方案是两个答案的组合。

前 DOM 个元素未正确设置以获取正确的值：

<label for="searchBy">Search by:</label>
<select id="searchBy" name="searchBy" tabindex="1" data-bind="options: searchBy, value: selectedSearchBy, optionsText: 'searchBy', optionsValue: 'value'"></select>

<label for="searchMethod">Search method:</label>
<select id="searchMethod" name="searchMethod" tabindex="2" data-bind="options: searchMethod, value: selectedSearchMethod, optionsText: 'searchMethod', optionsValue: 'value', disable: searchByDOB"></select>

然后是那个标准的正确 JS:

this.selectedSearchBy =  ko.observable({searchBy: 'Name', value: 'name'});

...

       this.selectedSearchBy.subscribe(function(latest) {
            if(this.selectedSearchBy() && this.selectedSearchBy() == 'dob')
            {
                this.searchByDOB(true);
            }
        }, this)

感谢@JasonSpake 和@pfx

KnockoutJS select 选项值

KnockoutJS select option value

knockout.js

jquery-ui-selectmenu