$index 如果绑定不起作用

Question

我有一段代码，我试图根据 $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) 没有得到最后一个索引的尊重，我得到了我想避免的最后一个分隔符类。这里出了什么问题？

Answer 1

您的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>

Answer 2

目前我们只能猜测您的视图模型结构。

如果 "lengthArray" 是一个 observable，你需要解开它的值：

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

或

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

说明

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

1 + lengthArray

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

如果您编写“lengthArray()” - 您正在调用“lengthArray”函数并获取它的实际值，您可以在计算中使用它：

1 + lengthArray()

如果你不知道 "lengthArray" 是否是 observable，可以使用 KnockoutJS 实用函数："ko.unwrap(lengthArray)" 来获取操作的值。

这就是 KnockoutJS 对绑定参数所做的。这就是为什么我们在使用绑定时不需要手动操作的原因。