【问题标题】:Two Select computed Knockout二选计算淘汰赛
【发布时间】:2015-11-24 10:45:16
【问题描述】:

我尝试将两个计算选择与 Knockout 绑定: - 在页面加载时填充第一个选择(DropDownLinee) - 第二个选择(DropDownCorse) 在用户选择第一个选择项时填充

这是一个例子:

<select id="DropDownLinee" data-bind="options: ArrayLinee, optionsText: 'NomeLinea', optionsValue: 'NomeLinea', value: selectedLinea " data-toggle="dropdown"></select>

<select id="DropDownCorse" data-bind="options: ArrayCorse,  optionsText: 'CodiceCorsa', optionsValue: 'CodiceCorsa', value: selectedCorsa " data-toggle="dropdown"></select>

 function LineeViewModel() {
      var self = this;

  self.selectedLinea = ko.observable();
  self.selectedCorsa = ko.observable();

  self.ArrayLinee = ko.observableArray([]);
  self.ArrayCorse = ko.observableArray([]);

  $.getJSON('/Home/GetLines', function (data) {
    self.ArrayLinee(data);
  });

  self.ArrayCorse = ko.computed(function () {
    $.getJSON('/Home/GetRides',
    {
      LineaSelezionata: self.selectedLinea(),
      DirezioneSelezionata: $('input[name=radio4]:checked', '.areaselezione').val()
    },
    function (data) {
      debugger;
      self.ArrayCorse(data);

    });
  });
}


  lineeVM = new LineeViewModel();
  ko.applyBindings(lineeVM);

当我检查加载“DropDownCorse”时出现此错误: 未捕获的错误:除非您指定“写入”选项,否则无法将值写入 ko.computed。如果要读取当前值,请不要传递任何参数。

谁能帮我解决这个问题???

提前致谢多纳托

【问题讨论】:

  • 计算函数用于根据其他值计算值,没有写入。您已将 ArrayCorse 定义为计算并在其中进行设置。这导致了问题。

标签: javascript jquery asp.net-mvc knockout.js


【解决方案1】:

您想使用subscribe,而不是computed

  self.selectedLinea.subscribe(function (newSelection) {
    $.getJSON('/Home/GetRides',
    {
      LineaSelezionata: newSelection,
      DirezioneSelezionata: $('input[name=radio4]:checked', '.areaselezione').val()
    },
    function (data) {
      debugger;
      self.ArrayCorse(data);

    });
  });

【讨论】:

  • 非常感谢您的回答。这就是我想要的。我尝试了您建议的示例并且它有效。
  • 此函数的一个主要缺陷是如果用户犹豫并将第一个选择两次更改为相同的选择,它将重新触发 AJAX 请求。最好在某处有一个标志来检查数据是否已经被提取(虽然这也是原始代码中的一个问题,但这里没有更正)。
  • @Tyblitz 重新选择相同的值不会触发订阅。只有实际的变化。
  • @RoyJ 会有一个实际的变化:虽然不太可能,但用户可能 1)选择 A,2)选择 B,3)重新选择 A。
  • 是的,嵌入的 JQuery 只是例如它已被可观察对象替换。
猜你喜欢
  • 2012-06-12
  • 2017-10-16
  • 1970-01-01
  • 1970-01-01
  • 2014-05-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-03
相关资源
最近更新 更多