select 渲染后的 Knockout 绑定

Question

所以我有一个 Select，它有来自计算的选项。每次 select 选项更改时，我都想 select 默认值。

我尝试了几种不同的方法：

订阅列表 - 在列表返回之前调用，因此可以更改 observable 的值，但它不会正确呈现，因为列表在之后更改。
afterRender - 不适用于此类绑定。
OptionsafterRender - 有效，如下面的 fiddle 所示，但是它要求每个单独的项目而不是在整个渲染中只调用一次，所以我认为这是错误的方法。

var rawData = [{
  Type: "1",
  Color: "Blue",
  Name: "Blue Car"
}, {
  Type: "2",
  Color: "Blue",
  Name: "Blue House"
}, {
  Type: "1",
  Color: "Red",
  Name: "Red Car"
}, {
  Type: "2",
  Color: "Red",
  Name: "Red House"
}];
var viewModel = {
  FirstSelectedOption: ko.observable(),
  SecondSelectOptions: null,
  SecondSelectedOption: ko.observable(),
  Load: function() {
    var self = viewModel;
    self.SecondSelectOptions = ko.computed(function() {
      var selected = self.FirstSelectedOption();
      var returnValue = new Array({
        Type: "*",
        Color: "All",
        Name: "All"
      });
      var filteredlist = ko.utils.arrayFilter(rawData, function(item) {
        return item.Type == selected;
      });
      returnValue = returnValue.concat(filteredlist);
      return returnValue;
    }, self);
    self.SecondSelectedOption.SetDefault = function() {
      // we want the default to always be blue instead 'all', blue might not be the last option
      var self = viewModel;
      var defaultoption = ko.utils.arrayFirst(self.SecondSelectOptions(), function(item) {
        return item.Color == "Blue";
      });
      self.SecondSelectedOption(defaultoption);
    };
  }

};

viewModel.Load();
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="value: FirstSelectedOption">
  <option value="1">Car</option>
  <option value="2">House</option>
</select>
<br/>
<select data-bind="options: SecondSelectOptions, 
                   optionsText: 'Name',                               
                   value: SecondSelectedOption,
                   optionsAfterRender: SecondSelectedOption.SetDefault"></select>

http://jsfiddle.net/dt627rkp/

我能想到的唯一方法是自定义绑定...我什至不确定如果不重新实现整个选项绑定是否真的可行。
我不可能是第一个想要这个的人，我是否缺少最好的 practice/way？

Answer 1

optionsAfterRender 回调传递 2 个参数：option（元素）和 item（绑定到选项的数据）。回调已经遍历选项，因此无需重申：

self.SecondSelectedOption.SetDefault = function (option, item) {
   var self = viewModel;
   if (item.Color === 'Blue')
       self.SecondSelectedOption(item);
};

Updated fiddle
参考：from the docs

编辑：话虽如此，如果您不想每次都重新评估选项，您也可以简单地将 change 事件与第一个 <select> 上的 setDefault 方法绑定。如果我遇到这段代码 'issue'，我可能会将数据预处理到单独的数组中，例如 this fiddle

select 渲染后的 Knockout 绑定

Knockout bind after select render

javascript

knockout.js

knockout-3.0