KnockOutJS 在下拉選擇更改時顯示隱藏元素

Question

嗨，我正在嘗試在 Knockout js 中獲取下拉列表的選定值，以便我可以根據選擇隱藏/顯示其他元素。 以下是我嘗試過的。 發生了什么我能夠在按鈕單擊時獲得正確的值，但在下拉選擇更改時無法獲得正確的值。

下面是我的代碼。 該按鈕給出了正確的值，但下拉選擇更改事件給出了先前的值而不是選定的值。

JS

   function ViewModel() {
     var self = this;
     self.optionValues= ko.observableArray(["Test1", "Test2", "Test3"]);
     self.selectedValue = ko.observable();

     self.save = function() {
        alert(self.selectedValue());            
    }
   }

  ko.applyBindings(new ViewModel());

HTML

<select data-bind="event:{ change: save},options: optionValues, value: selectedValue"></select>

 <button data-bind="click: save">Save</button>

Answer 1

您應該直接subscribe selectedValue observable，而不是change事件綁定綁定，並從那里調用您的邏輯：

function ViewModel() {
  var self = this;
  self.optionValues = ko.observableArray(["Test1", "Test2", "Test3"]);
  self.selectedValue = ko.observable();
  self.selectedValue.subscribe(function(newValue) {
    self.save();
  });
  self.save = function() {
    alert(self.selectedValue());
  }
}
ko.applyBindings(new ViewModel());

網址：

<select data-bind="options: optionValues, value: selectedValue"></select>

<button data-bind="click: save">Save</button>

演示JSFiddle 。