有条件地在foreach循环中造型了最后一个元素

Question

我有一小部分代码，我认为应该有效，在这里为清晰而破裂：

<!-- ko foreach: customer.address -->
    <span data-bind="style: { display: $index() === ($parent.data().length -1) 
                        ? 'inline-block' : 'block' }, text: $data.text"></span>
<!-- /ko -->

我的目的是绕打印跨度元素，其中大多数设置为display: block，最后设置为display: inline-block。似乎我如何括起来有条件，它不起作用并返回此错误：

Uncaught TypeError: Unable to process binding "foreach: function (){return customer.address }"
Message: Unable to process binding "style: function (){return { display:$index() ===($parent.data().length -1) ?'inline-block':'block'} }"
Messag...<omitted>...a'

将条件修改为否则评估为true的事物是可以的，例如`显示：（1 === 1）？"内联块"："块"。值得注意的是，在其他情况下，要检查最后一个元素的条件也可以，并且来自这个问题：

junctout.js foreach绑定测试如果最后一个元素

我应该如何有条件地将样式或其他属性应用于foreach循环中的最后一个元素？我试图避免使用两个<!-- ko if: -->和两条不同的<span>行，但是如果需要的话，请告诉我。

Answer 1

没有data()属性您在$parent上。

在链接的样本中，由于数组在父上称为 data，因此正在工作。

您的数组在customer.address属性中，因此您需要使用：

<!-- ko foreach: customer.address -->
    <span data-bind="style: { display: $index() === ($parent.customer.address.length -1) 
                        ? 'inline-block' : 'block' }, text: $data.text"></span>
<!-- /ko -->

demo jsfiddle。

注意：如果您的address是可观察的数组，则需要编写address()，所以$parent.customer.address().length

如果您不想重复数组名称，则可以使用with绑定来包装foreach：

<!-- ko with: customer.address -->
    <!-- ko foreach: $data -->
        <span data-bind="style: { display: $index() === ($parent.length -1)  
               ? 'inline-block' : 'block' }, text: $data"></span>
    <!-- /ko -->
<!-- /ko -->

在这种情况下，$parent将直接指向您的数组，因此无需重复其"路径"。

demo jsfiddle。

但是，如果只想为最后一个元素进行样式，并且与之相关的其他逻辑没有其他逻辑，则可以通过使用last-child选择器使用纯CSS3来实现此目标。

demo jsfiddle。