你能强制 KnockoutJS 重新评估绑定吗？

Question

我在页面中使用 KnockoutJS 和 MVVM，并且大多数情况下它可以工作，但我无法重新评估所有绑定。例如，我有一个按钮，我想在满足某些条件时启用：

<input type="submit" value="Purchase" data-bind="{enable: IsPurchaseValid}" />

IsPurchaseValid 是我的视图模型的计算函数：

viewModel.IsPurchaseValid = ko.computed(function() {
console.log("IsPurchaseValid: function entered...");

if (this.Duration() == null ||  this.Total() <= 0 || this.SelectedPackageId() < 0) {
    console.log("IsPurchaseValid: Something is missing...");
    return false;
}

return this.IsLocalityCountValid();
}, viewModel);

该按钮在页面加载时被正确禁用，但永远不会重新评估。 IsLocalityCountValid 是另一个计算函数，console.log 语句表明它返回 true。 Chrome 的控制台没有显示脚本错误。

如何正确地重新评估启用绑定？我还有一个可见绑定到 !IsLocalityCountValid 的跨度，但它永远不会变得可见。我觉得我错过了一些基本的东西，但不知道它可能是什么。

Answer 1

我有一个非常基本的重现，可以在它起作用的地方启用。 （见下面的小提琴）

我建议你检查你的CSS。我曾经遇到过这个问题，因为我以某种方式删除了我的按钮：禁用样式。我有一个改变背景颜色和字体颜色的按钮样式，但不知何故我
删除了按钮：禁用样式....所以最终结果是，当它被禁用时，它看起来与启用时完全相同。

无论如何，您可以在这里测试按钮启用/禁用：您可以在这里自己测试一下：http://jsfiddle。 net/johnpapa/wLKS6/

当没有 CSS 干扰时，这个问题不会发生在我身上。因此，关键可能是确保您的 CSS 类首先表现良好。

Answer 2

这可能是 KO 对计算值的评估没有看到所有可观察值，因此不知道何时重新评估计算值。

例如，如果 KO 看到 this.Duration 不为 null，它可能不会评估 if 块中的其他可观察量，因此，如果其他可观察量发生变化，可能不知道重新评估您的计算值。

试一下尺寸，看看是否有效：

viewModel.IsPurchaseValid = ko.computed(function() {
   console.log("IsPurchaseValid: function entered...");

   // Evaluate all dependent observables up front.
   // This will let KO know which observables this computed value is dependent on.
   var duration = this.Duration();
   var total = this.Total();
   var packageId = this.SelectedPackageId();
   var islocalityCountValid = this.IsLocalityCountValid();
   if (duration == null || total <= 0 || packageId < 0) {
       console.log("IsPurchaseValid: Something is missing...");
       return false;
   }

   return isLocalityCountValid;
}, viewModel);

Answer 3

您提到 IsLocalityCountValid 已更改为 true，但您没有提到 Duration 是否已更改为非 null、Total< /code> 已更改为 >0，SelectedPackageId 已更改为 >=0。如果它们都没有改变，Knockout 将不会重新评估计算，因为它在需要评估 IsLocalityCountValid 之前返回 false。有关更多信息，请参阅 http://knockoutjs.com/documentation/compulatedObservables.html#how_dependency_tracking_works细节。

Answer 4

我刚刚注意到您的数据绑定语句包含在大括号中：

data-bind="{enable: IsPurchaseValid}"

尝试不使用大括号：

data-bind="enable: IsPurchaseValid"

Answer 5

所以看来这实际上是一个错误。使用原始代码，如果将其绑定到输入类型“提交”，则它不起作用，但如果将其绑定到输入类型“按钮”，它就起作用。我将其提交给 KnockoutJS 谷歌小组。

编辑：
我将接受这个答案，但在 JSFiddle 中按钮和提交工作。我的假设是，一定存在一些跨 jquery 库冲突，因为我在实际站点中还有其他几个库在使用。