выберите тип элемента или элемента, используя нокаут

Question

У меня есть два поля со списком, и вы хотите выбрать либо тип станции, либо станцию ​​(если выбрана станция, установите для параметра stationType значение нулю и наоборот). Результат следующих кодовых наборов равен нулю, когда один из них изменился. Есть ли способ сохранить мой выбор и сбросить только другое поле?

<select class="form-control input-sm" data-bind="options: lookups.stationTypes, optionsText: 'Name', optionsValue: 'Id', value: ProductPlanItem().StationTypeId"></select> 

и

<select class="form-control input-sm" data-bind="options: lookups.stations, optionsText: 'Name', optionsValue: 'Id', value: ProductPlanItem().StationId"></select> 

ProductPlanItem как это:

function ProductPlanItem() { 
     var me = this 
     me.StationTypeId = ko.observable() 
     me.StationId = ko.observable() 
     me.StationTypeId.subscribe(function() { 
      me.StationId(0) 
     }) 
     me.StationId.subscribe(function() { 
      me.StationTypeId(0) 
     }) 
    } 

Answer 1

Вы можете использовать ko.computed с функцией read и write для этого. Проблема с вашей текущей настройкой заключается в том, что настройка StationId в первой подписке запускает вторую подписку.

Вот ваше основное поведение в примере:

function ViewModel() { 
 
    this.first = ko.observable(1); 
 
    this.second = ko.observable(2); 
 

 
    this.oddsAndZero = [0, 1, 3, 5, 7, 9]; 
 
    this.evensAndZero = [0, 2, 4, 6, 8, 10]; 
 

 
    this.firstSelection = ko.computed({ 
 
    read: this.first, 
 
    write: function(newValue) { 
 
     this.first(newValue); 
 
     this.second(0); 
 
    }, 
 
    owner: this 
 
    }); 
 
    
 
    this.secondSelection = ko.computed({ 
 
    read: this.second, 
 
    write: function(newValue) { 
 
     this.second(newValue); 
 
     this.first(0); 
 
    }, 
 
    owner: this 
 
    }); 
 

 
} 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 

 
<select data-bind="options: oddsAndZero, value: firstSelection"></select> 
 
<select data-bind="options: evensAndZero, value: secondSelection"></select>