如何在淘汰JS变量中分配未定义的值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (36)

我有2个下拉列表和一个结果列表,其结合使用计算的observable函数,如下所示:

     self.Records = ko.computed(function() {
                    if (self.dropdown1 !== undefined) {
 ...
                        return Collection[0];
                    }

                    if (self.dropdown2() != undefined) {
                     ...
                        return Collection[0];
                    }
                });

但我的问题是,当我更改dropdownlist2的valie时,我需要在self.dropdown1中设置未定义的值,因为我的记录集合可以更改。

我正在使用jquery更改第一个下拉列表的值,如下所示:

  $('#reportTypeSelection').prop('selectedIndex', 0);

但绑定并不令人耳目一新。请给我任何建议。

提问于
用户回答回答于

我认为你不应该使用jQuery来编写那个逻辑。下面是一个如何在视图模型中完成此操作的示例,其中视图不了解逻辑。

var VM = function() {
  
  var self = this;

  self.items = ko.observableArray(["Item1", "Item2", "Item3"]);

  self.dropdown1 = ko.observable();
  self.dropdown2 = ko.observable();

  self.dropdown1.subscribe(function(newValue) {
    if (newValue) {
      self.dropdown2(null);
    }
  });

  self.dropdown2.subscribe(function(newValue) {
    if (newValue) {
      self.dropdown1(null);
    }
  });
}

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options:items, optionsCaption:'Select first item',value: dropdown1"></select>

<select data-bind="options:items, optionsCaption:'Select second item',value: dropdown2"></select>
用户回答回答于

您可以添加更多代码来帮助我们了解您在做什么。我假设你想要在更改dropdown2时更改dropdown1的值。如果我是对的,你可以使用change事件来做到这一点。

var ViewModel = function() {
  var self = this;

  self.data = ko.observableArray(["Dog", "Cat", "Bird"]);

  self.dropdown1 = ko.observable(undefined);
  self.dropdown2 = ko.observable(undefined);

  self.changeDropDownValue = function(index) {
    if (index == 1)
      self.dropdown2(undefined);
    else
      self.dropdown1(undefined);
  }
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options:data, optionsCaption:'Select a pet...',value: $root.dropdown1, event:{change:$root.changeDropDownValue(1)}" ></select>
<select data-bind="options:data, optionsCaption:'Select a pet...',value: $root.dropdown2, event:{change:$root.changeDropDownValue(2)}" ></select>

扫码关注云+社区

领取腾讯云代金券