淘汰赛 JS + 更新帮助文本答案

【问题标题】：Knockout JS + Update helper text淘汰赛 JS + 更新帮助文本
【发布时间】：2012-09-20 00:16:11
【问题描述】：

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

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

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

感谢您的宝贵时间。

【问题讨论】：

标签： knockout.js

【解决方案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() );

【讨论】：

谢谢，这也有效。我注意到 var self = this 这一行。你为什么要这么做？为什么不只是参考 criteria() 而不是 self.criteria() ？
@Gordon 因为范围内没有criteria，所以就计算值的函数而言。如果criteria 用var 声明，它会起作用，但事实并非如此。（提示：当计算函数运行时，this 指向window 对象。）声明var self = this; 是存储对“父对象”的引用的常用技术。另一个变体是将this 作为第二个参数传递给ko.computed()，就像您在代码中所做的那样。