jquery - 覆盖 ko.compute 值

Question

我这里有这段代码

  orderTotal = ko.computed(function () {

        return parseFloat($("#PurchaseDomainSuffix option:selected").text().match(/[0-9]+(?:\.[0-9]*)?/g)) || 0;
    }

在页面加载时从字符串中取出数值。 (从下拉列表加载)但是当列表更改时，我无法弄清楚如何更新 orderTotal 值。

我是 knockout 新手，我正在研究 ko.compulated 的写入函数。不确定我的方向是否正确。 更改下拉列表后，如何用新值覆盖页面加载的值。

Answer 1

Knockout 对下拉菜单有非常酷的支持。

您可以使用 options 绑定(bind)来生成列表，并使用 value 选项来做出正确的选择。这是一个简单的示例。

function ViewModel() {
  var self = this;

  self.list = [{
      name: "Breakfast",
      time: 'Morning'
    },
    {
      name: "Lunch",
      time: 'Noon'
    },
    {
      name: "Dinner",
      time: 'Evening'
    }
  ];

  self.selectedItem = ko.observable();

  self.selectedComputed = ko.computed(function() {
    var selectedItem = self.selectedItem();
    return "I'll eat at " + selectedItem;

  });


}

ko.applyBindings(new ViewModel());

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

<select data-bind="options: list, value: selectedItem, optionsText: 'name', optionsValue: 'time'"></select>
<br>
<span data-bind="text: selectedItem"></span>
<br>
<span data-bind="text: selectedComputed"></span>