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'

将条件修改为否则评估为真的条件是正确的，例如`display：（1 === 1）？ 'inline-block'：'block'。值得注意的是，在其他情况下检查最后一个元素的条件也没问题，并且来自这个SO问题：

Knockout.js foreach binding test if last element

如何有条件地将样式或其他属性应用于foreach循环中的最后一个元素？我试图避免使用两个和两个不同的<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 -->

演示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将直接指向您的数组，因此无需重复其“路径”。

演示JSFiddle。

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

演示JSFiddle。

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

1 个答案: