KnockoutJS выбрать значение параметра

Question

Я пытаюсь отключить один выбранный элемент HTML на основе значения другого выбранного элемента HTML с помощью KnockoutJS

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

Что мне не хватает? Должен ли я изменить логику на событие изменения?

Answer 1

Здесь нет .value имущество; это тот, который дает неопределенную ошибку.

Просто прочитайте значение через this.selectedSearchBy(),

Также напишите собственности через this.searchByDOB(true) вместо присвоения значения.

РЕДАКТИРОВАТЬ

Метод подписки должен включать как this.searchByDOB(true) и отключить this.searchByDOB(false) заявления, в противном случае раскрывающийся список остается отключенным после отключения.

Кроме того, только проверка через (this.selectedSearchBy() === 'dob') достаточно.
(Prefere === над ==, хотя здесь нет разницы.)

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 2

В первый раз ваша подписка срабатывает сразу после загрузки страницы, поэтому выбор еще не сделан. selectedSearchBy не определен так же, как он говорит, поэтому вы не можете вызвать ".value" на нем.

Вы можете либо задать selectedSearchBy значение по умолчанию, соответствующее одному из параметров в вашем массиве searchBy, либо проверить значение selectedSearchBy перед вызовом.value.

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

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