Question

我有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);

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

Answer 1

我认为你不应该使用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>

Answer 2

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

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>

Answer 3

OP问题是：“如何为敲除JS变量分配未定义的值？”。我在这里阅读的其他答案并未明确回答该问题。

我认为在过去，someObservable(undefined)与someObservable()的作用完全相同，返回的是可观察的值。但是，在最新的淘汰赛版本（在3.4.2中进行测试）上，该语法确实可以在可观察值上重置。

通过运行此脚本亲自查看。

let x = ko.observable();
console.log(x());
x(1);
console.log(x());
x(undefined);
console.log(x());

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

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

3 个答案: