Knockout.js:在foreach循环中包含静态内容

Question

这个最近的淘汰赛难题让我想用头撞墙，把自己击倒在地..因此，让我们看看是否有人可以帮我省去一些痛苦:)

正如文档所述，在敲除ForEach之前和之后添加静态元素非常简单：

<div id="myContainer">
    <p>Element Before The Loop</p>
    <!-- ko foreach: myData -->
    <p data-bind="text: myText"></p>
    <!-- /ko -->
    <p>Element After The Loop</p>
</tr> 

然而，我的需求包括在一个设置点中断迭代循环的流程，包括一个静态元素，然后继续循环流程。

下面是一个伪代码样式的示例。这里的要求是，给定ForEach中的“X”数据项的列表，我想输出前5个，然后是我的静态元素，然后是第6个以后的其余数据项：

<div id="myContainer">        
    <!-- ko foreach[1-5]: myData -->
    <p data-bind="text: myText"></p>
    <!-- /ko -->

    <p>MY STATIC ELEMENT</p>

    <!-- ko foreach[6+]: myData -->
    <p data-bind="text: myText"></p>
    <!-- /ko -->       
</div> 

对于这样的任务，有人能建议合适的语法吗？非常感谢任何人，谁可以在这方面的任何光芒。

Answer 1

您可以将inline if binding与$index from the foreach binding一起使用

<div>
    <!-- ko foreach: items -->
      <div data-bind="text: $data"></div>

      <!-- ko if: $index() == 4 -->
        <p>Static!</p>
      <!-- /ko -->
    <!-- /ko -->
</div>

​

var vm = {
     items: ko.observableArray([])
};

for (var x = 1; x <= 10; x++)
    vm.items.push('Item ' + x);

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
    <!-- ko foreach: items -->
      <div data-bind="text: $data"></div>

      <!-- ko if: $index() == 4 -->
        <p>Static!</p>
      <!-- /ko -->
    <!-- /ko -->
</div>

​

根据CrimsonChris' comment，如果您需要始终显示静态内容，即使少于5项，您也可以按如下方式修改绑定，尽管这假设您将始终至少有一项要显示：

<div>
    <!-- ko foreach: items -->
      <div data-bind="text: $data"></div>

      <!-- ko if: $index() == 4 || ($index() == $parent.items().length-1 && $index() <= 4) -->
        <p>Static!</p>
      <!-- /ko -->
    <!-- /ko -->
</div>

Answer 2

您始终可以使用正常切片函数将数组分割为两部分。

<div>
    <!-- ko foreach: items().slice(0, 5) -->

     <!-- /ko -->
     <p>MY STATIC ELEMENT</p>
     <!-- ko foreach: items().slice(5) -->

     <!-- /ko -->
</div>

如果愿意，您可以在模型中这样做，以避免VM中的逻辑。缺点是您将foreach的内容复制了两次；可以将其移动到模板中以避免该问题。