knockout.js - 淘汰赛 JS + 更新帮助文本

Question

我对 Knockout JS 相当陌生。我正在尝试做一个简单的任务，如果下拉菜单更改根据下拉列表中选择的值显示帮助文本。

我的示例位于 jsFiddle：http: //jsfiddle.net/dnfCb/10/

注意：我不确定是否允许链接到 jsFiddle，如果不允许，我将在此处粘贴代码。似乎 ko.computed 事件仅在加载时触发。当标准发生变化时，它似乎无法启动。

感谢您的时间。

Answer 1

您需要将您的<select>值绑定到实际的可观察属性以查看更改。

<-- ------------------------ here....................... -->
<select name="search_option" data-bind="value: criteria">
    <option value="O">Order Search</option>
    <option value="P">PO Number Search</option>
</select>

和

var orderSearchViewModel = {
   criteria: ko.observable("O")   // give a default value
};

orderSearchViewModel.helperText = ko.computed(function() {
    if (this.criteria() == "P") {
        return "Searching by PO Number";
    }else {
        return "Searching by Order Number";
    }
}, orderSearchViewModel);

ko.applyBindings(orderSearchViewModel);​

请注意，这criteria是一个需要执行才能获得基础值的函数，所以

if (this.criteria == "P")

行不通。

http://jsfiddle.net/dnfCb/11/

---

顺便说一句，我认为独立的视图模型设置更好一些：

function OrderSearchViewModel() {
  var self = this;

  this.criteria = ko.observable("O");
  this.helperText = ko.computed(function() {
    if ( self.criteria() == "P" ) {
      return "Searching by PO Number";
    } else {
      return "Searching by Order Number";
    }
  });
}

ko.applyBindings( new OrderSearchViewModel() );​