带有if绑定的$index不起作用

$index with if binding not working

本文关键字：index 不起作用 if 绑定 带有      更新时间：2023-09-26

我有一个代码块，我试图显示一些基于$index值的标记，并将其与可观察值进行比较。

<div class='config-summary-chart-section'>
  <!-- ko foreach: codeCoverageStats -->
  <div class='config-stat-chart-section'>
  <div class='chart-heading' data-bind='text: lengthArray ' />
  <div class='chart-heading' data-bind='text: $index ' />                         
</div>        
<!-- ko if: $index() !== lengthArray -->                           
<div class='separator' />                                        
  <!-- /ko -->                                  
  <!-- /ko -->
</div>

我的两个class＝"chart-heading"都按预期打印值。例如，如果lengthArray为4，则打印

4   4   4   4   4 
0   1   2   3   4

但是if条件（$index（）！==lengthArray）没有得到最后一个索引的尊重，我得到了我想避免的最后一个分隔符类。这里出了什么问题？

您的lengthArray值很可能是一个字符串，它与数字不同。确保数值的一个简单方法是在其前面加一个+。在下面的例子中，在索引4的元素之后不会生成hr。

function la(lengthValue) {
  return {
    lengthArray: lengthValue
  };
}
vm = {
  codeCoverageStats: ko.observableArray([
    la(4),
    la(4),
    la(4),
    la(4),
    la('4'),
    la(4)
  ])
};
ko.applyBindings(vm);
.config-stat-chart-section > div {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class='config-summary-chart-section'>
  <!-- ko foreach: codeCoverageStats -->
  <div class='config-stat-chart-section'>
    <div class='chart-heading' data-bind='text: lengthArray '></div>
    <div class='chart-heading' data-bind='text: $index '></div>
  </div>
  <!-- ko if: $index() !== +lengthArray -->
  <hr />
  <!-- /ko -->
  <!-- /ko -->
</div>

现在我们只能猜测您的视图模型结构。

如果"lengthArray"是可观察的，则需要打开其值：

<!-- ko if: $index() !== lengthArray() -->

或

<!-- ko if: $index() !== ko.unwrap(lengthArray) -->

解释

当我们使用可观测值作为计算参数时，我们应该打开它们。假设"lengthArray"是可观测的。这意味着"lengthArray"是一个函数（对函数的引用）。所以写

1 + lengthArray

是一个错误，因为您添加了两个不同的对象：一个数字和一个函数引用。

如果你写"lengthArray（）"——你正在调用"lengthArray"函数并获得它的实际值，你可以在计算中使用：

1 + lengthArray()

如果您不知道"lengthArray"是否是可观察的，可以使用KnockoutJS实用程序函数："ko.unwrap（lengthArray）"来获取操作值。

这就是KnockoutJS对绑定参数所做的操作。这就是为什么我们在使用绑定时不必手动执行此操作。

相关文章：