$index 与 if 绑定不起作用

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) 没有被最后一个索引接受，我得到了我想避免的最后一个分隔符 class。这里出了什么问题？

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" 是一个可观察对象，您需要解包它的值：

<!-- 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 对绑定参数所做的事情。这就是为什么我们在使用绑定时不需要手动完成的原因。

$index 与 if 绑定不起作用

$index with if binding not working

javascript

data-binding

knockout-2.0

knockout.js

解释