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() );

Knockout JS + Update帮助文本

1 个答案: