Knockout.js：包括静态内容 INSIDE 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 的内容复制了两次；可以将其移动到模板中以避免该问题。