如何使用Knockout JS数组映射根据输入条件使选择选项绑定默认值

How to make a select options binding default based on input conditions using a Knockout JS Array Map?

本文关键字：条件 选择 选项 默认值 绑定 输入 Knockout 何使用 JS 数组 映射      更新时间：2023-09-26

我正在使用Computed Observable和Array Map将数据绑定到选择选项。

使用下面的代码结构，如何在选择选项中将国家/地区设置为默认值？例如：如果用户来自Albania，则将默认国家/地区设置为Albania。请注意，我正在使用并需要选定的值作为另一个函数的参数。

完整代码：

(function(){
    var self = this;
    self.SelectedCountry = ko.observableArray([]);
    self.CountryData = ko.observableArray([]);
    $.getJSON('https://restcountries.eu/rest/v1/all', function(data){
        self.CountryData(data);
    });
    function viewModel(){
      // Add some possible logic to make country default based on input
      // from user. E.g. If data.alpha3Code === '1234'
        self.Countries = ko.computed(function () {
            return ko.utils.arrayMap(CountryData(),
                    function (data) {
                        return {
                            Name: data.name + ' ' + data.capital,
                            value: data.alpha3Code
                        }
                    });
        }).extend({notify: 'always'})
    }
    self.Location = ko.computed(function () {
        if (self.SelectedCountry()) {
            return ko.utils.arrayFilter(CountryData(), function (item) {
                return item.alpha3Code === self.SelectedCountry().value;
            });
        }
    });
    ko.applyBindings(new viewModel());
})();

JSFiddle上的工作示例：

这里的代码有很多错误。

  1. SelectedCountry应该是可观测的，而不是可观测的数组
  2. viewModel不是一个合适的构造函数，因此不应该用new调用（我只是完全去掉了它）
  3. 您应该将self传递给applyBindings
  4. 您可能希望在所选绑定中使用optionsValue: 'value'
  5. self应该初始化为一个空对象。this是你完成它的全局对象。你可能想把它全部放在你的构造函数里
  6. 你需要把self放在电脑的CountryData前面
  7. Location应该只返回名称，而不是数组，因为如果没有定义SelectedCountry，则没有数组，并且[0]中断

所有这些都解决了，您只需要设置SelectedCountry的值，选择就会相应地更新。唯一的技巧是，你需要向select添加另一个绑定valueAllowUnset: true，告诉它你选择的值可能不在那里（至少在加载数据之前不会在那里）。

(function() {
  var self = {};
  self.SelectedCountry = ko.observable('BHR');
  self.CountryData = ko.observableArray([]);
  $.getJSON('https://restcountries.eu/rest/v1/all', function(data) {
    self.CountryData(data);
  });
  self.Countries = ko.computed(function() {
    return ko.utils.arrayMap(self.CountryData(),
      function(data) {
        return {
          Name: data.name + ' ' + data.capital,
          value: data.alpha3Code
        }
      });
  }).extend({
    notify: 'always'
  })
  self.Location = ko.computed(function() {
    if (self.SelectedCountry()) {
      var match = ko.utils.arrayFilter(self.CountryData(), function(item) {
        return item.alpha3Code === self.SelectedCountry();
      })[0];
      if (match) {
        return match.name;
      }
    }
  });
  ko.applyBindings(self);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: Countries, optionsText: 'Name', optionsValue: 'value', valueAllowUnset: true, value: SelectedCountry"></select>
<p>Welcome! You are from:</p> <span data-bind="text: Location()"></span>

相关文章：