Knockout.js 在knockout中要求一个值

我对Knockout.js是新手，我正在努力学习。为了学习，我正在创建一个网页。此网页上有一个搜索字段。默认情况下，搜索字段为空。如果用户输入一个值，然后将其删除，我希望将搜索框的背景设置为红色，以显示它是必需的。当用户单击搜索按钮时，我只想显示一个基本的JavaScript警报框。如果查询有值，只需显示“正在搜索“[query]”。如果用户没有提供查询，我想显示一个警告，上面写着“请输入查询”。非常简单

目前，我有一个基本表单，如下所示：

<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;
}

.必需{背景色：红色；}
...
搜索：
...
函数searchViewModel（）{
this.query=ko.observable（null）.extend（{required:”“}）；
}
应用绑定（新的searchViewModel（））；
ko.extenders.required=函数（目标，消息）{
target.hasError=ko.observable（）；
函数验证（newValue）{
target.hasError（newValue？false:true）；
}
验证（目标）；
目标。订阅（验证）；
回报目标；
}

---

我从官方的Knockout.js网站上获得了所需的扩展器。不幸的是，我的代码不起作用。为什么？就我个人而言，我无法理解为什么这不起作用。

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

因此，在您的情况下，

ko.extenders.required

调用应该在

new searchViewModel（）调用之前进行

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


ko.applyBindings(new searchViewModel());

由于您使用的是
required
扩展器，因此无需手动检查
css
绑定中的
查询
，因为它为您提供了一个
hasError
可观察的：

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

演示

顺便说一下，您的原始css绑定不起作用（除了错误的条件之外），因为您需要编写
query（）
，以便在表达式中使用ko.observable值

因此，以下措施也将起作用：

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



演示。
您的新值似乎没有值。请将其记录下来以确保。此外，在尝试使用它之前，您需要注册扩展器。如果您创建了一个JSFIDLE，我可以告诉您我的意思，修复它大约需要10秒的时间。。。
<input data-bind="value:query, 
                  css: { required: (query() != null && query().length == 0) }"/>