javascript - 有条件地设置 knockout.js foreach 循环中最后一个元素的样式

Question

我有一小段我认为应该可以工作的代码，为了清楚起见，这里换行了:

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

我的目标是循环打印出 span 元素，其中大部分设置为 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'

将条件修改为在其他情况下计算为真的东西是可以的，例如`显示:(1 === 1)？ '内联 block ':' block '。还值得注意的是，在其他情况下，检查最后一个元素的条件也是可以的，并且来自这个 SO 问题:

Knockout.js foreach binding test if last element

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

Answer 1

$parent 上没有data() 属性。

在链接示例中，它可以正常工作，因为该数组在父级上称为 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 -->

演示 JSFiddle .

注意:如果你的 address 是一个可观察的数组，你需要写 address() 所以 $parent.customer.address().length

如果您不想重复数组名称，您可以使用 with 绑定(bind)来包装您的 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 将直接指向您的数组，因此无需重复其“路径”。

演示 JSFiddle .

但是，如果只想设置最后一个元素的样式并且没有与之相关的其他逻辑，您可以使用带有 last-child 选择器的纯 CSS3 来实现。

演示 JSFiddle .