list - 如何在knockout.js中制作按钮而不是项目

Question

我想要一个在网格中对齐的照片列表，并且在列表的末尾我想要一个按钮来上传另一张照片。通常， knockout “foreach”绑定(bind)会复制内容，次数与列表中的项目数相同。对于仅照片列表，我会执行以下操作:

<ul data-bind="foreach: photos">
    <li>
        <img ....>
    </li>
</ul>

但是我需要一个最终的 html 看起来像这样:

<ul>
    <li><img ....></li>
    <li><img ....></li>
    <li><img ....></li>
    <li><input ....></li>
</ul>

是否有可能以某种方式使 knockout 在列表末尾生成某种“特殊”项目？

Answer 1

您可以考虑使用无容器语法并在 foreach 之后添加一个元素，如下所示:

<ul>
    <!-- ko foreach: photos-->
        <li><img ....></li>
        <li><img ....></li>
        <li><img ....></li>
    <!-- /ko -->
    <li><input ....></li>
</ul>

引用:

<强> See section: Note 4: Using foreach without a container element

In some cases, you might want to duplicate a section of markup, but you don’t have any container element on which to put a foreach binding.