1

我是 Knockout.js 的新手，我正在努力学习它。为了学习，我正在创建一个网页。此网页上有一个搜索字段。默认情况下，搜索字段为空。如果用户输入一个值然后删除它，我想让搜索框的背景变为红色以显示它是必需的。当用户单击搜索按钮时，我只想显示一个基本的 JavaScript 警报框。如果查询有值，只需显示“正在搜索‘[查询’”。如果用户没有提供查询，我想显示一条提示“请输入查询。”。很普通的香草。

目前，我有一个看起来像这样的基本形式：

<style type="text/css">
  .required { background-color:red; }
</style>

...

<form id="searchForm">
  Search: <input data-bind="value:query, css: { required: (query != null && query.length > 0) }" />
  <input type="button" value="search" /> 
</form>

...

function searchViewModel() {
  this.query = ko.observable(null).extend({ required:"" });
}
ko.applyBindings(new searchViewModel());

ko.extenders.required = function(target, msg) {
  target.hasError = ko.observable();
  function validate(newValue) {
    target.hasError(newValue ? false : true);
  }
  validate(target);
  target.subscribe(validate);

  return target;
}

我从官方 Knockout.js 网站获得了所需的扩展器，这里。不幸的是，我的代码不起作用。为什么？对于我的生活，我无法弄清楚为什么这不起作用。

4

1 回答 1

0

文档中没有说明，但您需要在第一次使用它之前创建扩展器。

因此，在您的情况下，ko.extenders.required呼叫应该在呼叫之前进行new searchViewModel()：

ko.extenders.required = function(target, msg) {
  //...
}


ko.applyBindings(new searchViewModel());

而且由于您使用的是required扩展器，因此无需手动检查绑定query，css因为它为您提供了一个hasErrorobservable：

 <input data-bind="value:query, css: { required: query.hasError }" />

您还可以hasError在search函数中使用它来显示警报：

this.search = function () {
    if (this.query.hasError()){
        alert('Please enter a query.');
    }
    else {
        alert('Searching for ' + this.query());
    }
}

演示JSFiddle。

顺便说一句，您的原始 css 绑定不起作用（除了错误的条件），因为query()如果在表达式中使用它，您需要编写以获得 ko.observable 值。

所以以下也可以工作：

<input data-bind="value:query, 
                  css: { required: (query() != null && query().length == 0) }"/>

演示JSFiddle。

于 2013-10-20T14:03:48.997 回答