Question

我是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网站here获得了所需的扩展程序。不幸的是，我的代码无效。为什么？对于我的生活，我无法弄清楚为什么这不起作用。

Answer 1

未在文档中说明，但您需要在首次使用之前创建扩展程序。

因此，在您的情况下ko.extenders.required来电应该之前 new searchViewModel()来电：

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


ko.applyBindings(new searchViewModel());

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

 <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。

需要淘汰赛的价值

1 个答案: