如何有条件地绑定到 knockout.js 中的“valueUpdate”？

Posted 2023-03-27

【中文标题】如何有条件地绑定到 knockout.js 中的“valueUpdate”？

【英文标题】：How do I conditionally bind to "valueUpdate" in knockout.js?

【发布时间】：2019-01-13 18:54:30

【问题描述】：

我目前正在使用 knockout.js 和 knockout.validation.js 插件，它在大多数情况下都能很好地工作。我一直在努力解决的是在输入模糊时第一次触发验证，然后每次击键都触发验证。我真的觉得下面的代码应该可以解决这个问题。

<input type="text" class="form-control"
       data-bind="value: Name, 
           valueUpdate: Name.isModified() ? 'afterkeydown' : '',
           style:  background: Name.isModified() ? 'red' : 'green'" 
/>

由于某种原因，当 isModified() 更改时 valueUpdate 不会更改为 afterkeydown，但背景颜色确实会按照我的预期正确更改。 （那行代码只是用来帮助调试的）。

当 isModified 可观察值发生更改时，我做错了什么导致 valueUpdate 方法无法正确更新？

编辑：

我想我问这个问题可能做得不好。我想知道的是为什么这段代码没有：

<input type="text" class="form-control"
       data-bind="value: Name, 
           valueUpdate: Name.isModified() ? 'afterkeydown' : ''"
/>

表现得像这样的代码：

<!-- ko if: Name.isModified() -->
    <input type="text" 
           class="form-control" 
           data-bind="value: Name, valueUpdate: 'afterkeydown'" />
<!-- /ko -->
<!-- ko if: !Name.isModified() -->
    <input type="text" class="form-control" data-bind="value: Name" />
<!-- /ko -->

在我看来，您不能有条件地绑定到“valueUpdate”属性，而且我无法在任何淘汰文档中确认这一点。在第一种情况下，当 Name.isModified 更新时 valueUpdate 不会更改为 'afterkeydown'。到底是怎么回事？

【问题讨论】：

这是一个完整的黑暗拍摄，试试这个valueUpdate: (Name.isModified() ? 'afterkeydown' : '')

@Ray 感谢您的评论，但遗憾的是它似乎没有任何不同。

不建议使用value 绑定来处理valueUpdate 的情况。根据他们建议使用textInput 绑定的文档：检查Note 1 in：knockoutjs.com/documentation/value-binding.html。

【参考方案1】：

This 是 Knockout 的 value 绑定的定义。 在第 14+ 行，您将开始看到附加到元素的初始事件处理程序。 附加了“更改”以及任何其他已定义的处理程序，例如 valueUpdate 请求的处理程序。

不幸的是（或没有），正如您所见，它们在输入初始化期间被提取并执行一次，因此当您尝试更改绑定的值时，它没有任何效果，Knockout 中没有任何东西在监视它。

您的第二个示例是您想要动态更改该绑定参数时的方法，但在您的情况下，我认为您没有正确执行。

Knockout-validation 验证器附带一个选项来定义 onlyIf 回调，以允许您运行/停止验证。 您想要做的是在该onlyIf 回调中评估一个可观察对象，并在您想要的情况下将该可观察对象设置为真（在输入模糊或其他任何情况下） onlyIf docs

【讨论】：

该死。我确实认为是这样的。我想我只是要创建一个使用 语法而不是 onlyIf 语法的组件，因为看起来我需要将 onlyIf 添加到每个经过验证的属性中，而它似乎并不一样干净。非常感谢。我已将此标记为已接受的答案。

取决于你想要制作这个东西的正确程度，从长远来看，我建议你不要使用这样的无容器组件，有时性能可能会差 6 倍......也是 onlyIf场景非常干净，当定义具有时间概念的验证时，而不是“始终运行”，其非常干净的编码将其定义在与验证器相同的“行”上，使事情保持紧凑和有条理！好吧，这是 javascript，它们可能有几十种方法来解决它：P