Question

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

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

订阅列表 - 在列表返回之前调用，因此更改可观察值的值，但是dosnt呈现正确，因为列表更改后。
afterRender - 不适用于此类绑定。
OptionsafterRender - 工作，就像下面的小提琴一样，但是它要求每个单独的项目，而不是整个渲染只需要一次，所以这对我来说是错误的方式。

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/

我能想到的唯一方法是自定义绑定......我甚至不确定如果不重新实现整个选项绑定，那么这是真的可行。
我不能成为第一个想要这个的人，是否有一种我缺少的最佳实践/方式？

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上使用setDefault方法绑定<select>事件。如果我遇到这个代码＆＃39;问题，我可能会将数据预处理为单独的数组，例如this fiddle

选择渲染后的Knockout绑定

1 个答案: