0

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

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

  • 订阅列表 - 在列表返回之前调用，因此可以更改可观察的值，但它不会正确呈现，因为列表在之后更改。

  • 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/

我能想到的唯一方法是自定义绑定......我什至不确定如果不重新实现整个选项绑定真的有可能。
我不能成为第一个想要这个的人，有没有我错过的最佳实践/方式？

4

1 回答 1

0

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

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

更新的小提琴
参考：来自文档

编辑：话虽如此，如果您不希望每次都重新评估选项，您也可以简单地将change事件与setDefaultfirst 上的方法绑定<select>。如果我遇到这个代码“问题”，我可能会将数据预处理到单独的数组中，就像在这个小提琴中一样

于 2015-03-06T22:34:22.590 回答