Question

我一直在努力完成KnockoutJS文档，并尝试修改此page中“可写计算可观察量”部分的示例3。

该示例基本上显示了一个文本框，并在用户向文本框输入非数字值时显示一条消息。我尝试修改代码，以便在出现消息时文本框具有粉红色背景。

问题是，当您输入无效值时，文本框会按预期变为粉红色，但您输入的值将替换为原来的值。我不知道为什么这种行为正在发生，因为在我添加样式绑定以获得粉红色背景之前一切正常。尝试删除样式绑定，并注意输入无效值时行为如何变化。

发生了什么事？

代码位于下方或试用此jsfiddle。

<p>
  Enter a numeric value:
  <input data-bind="value: attemptedValue
                   ,style: {backgroundColor: lastInputWasValid() ?
                                             'transparent' :
                                             'pink' }"/>
</p>
<div data-bind="visible: !lastInputWasValid()">That's not a number!</div>

function MyViewModel() {
  this.acceptedNumericValue = ko.observable(123);
  this.lastInputWasValid = ko.observable(true);

  this.attemptedValue = ko.computed({
      read: this.acceptedNumericValue,
      write: function (value) {
          if (isNaN(value))
              this.lastInputWasValid(false);   
          else {
              this.lastInputWasValid(true);
              this.acceptedNumericValue(value); // Write to underlying storage
          }
      },
      owner: this
  });   
}

ko.applyBindings(new MyViewModel());

编辑：这是删除了样式绑定的另一个fiddle。尝试附加字母'a'并将焦点从文本框中取出。请注意字母'a'是如何保留的。尝试使用原始的fiddle文本框并注意它是如何删除的。两个小提琴之间唯一的变化是样式绑定的存在。

Answer 1

如果值为NAN，则永远不会写入模型，因此在onblur事件被触发时，输入将更新为模型的现有值。

this.acceptedNumericValue(value); // Write to underlying storage

值是否为数字时更新的代码。您可以看到它不在else块中。

Answer 2

所以我发了an email to the KnockoutJS user group并在大约7个小时内得到了回复（不是太破旧）。

可悲的是，Google网上论坛让我感到困惑，我不知道如何回复那个清理我问题的人，告诉他来这里并发表他的回答，所以我想我会为他做的。所有功劳都归功于KO用户组的John Earles。

对我来说很有意义。

在没有样式的示例中，Knockout不必重新渲染   您的输入（仅错误），因此值保持不变。   在你的样式示例中，Knockout必须重新渲染你的样式   输入（添加样式），所以BOTH绑定执行并读取   value - 这是最后接受的值。

这是一个将尝试的值保存为两个中的一个的版本   可观察的，并从基于的适当的读取   lastInputWasValid：

http://jsfiddle.net/jearles/VSWfr/

这是一个KnockoutJS错误还是我做了多个绑定错误？

2 个答案: