knockout.js - 敲除模板绑定

Question

我有一个通过模板绑定填充的 ul 元素。

<script type="text/html" id="someTemplate">
<li>
   <span data-bind="text: someText">
</li>
</script>

<ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}">
</ul>

但我希望第一个li-tag 不是来自模板的 li-tag，而是另一个带有按钮的标签，它不会连接到 someElemets 数组。如果我那样做

<ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}">
    <li><button data-bind=click: doSomething">Click me</button></li>
</ul>

然后带有按钮的 li-tag 将是渲染后的最后一个。解决该问题的最佳方法是什么？

Answer 1

您可以使用无容器控制流语法，使用注释标签进行数据绑定。不需要模板。更多信息

<ul>     
    <li><button data-bind=click: doSomething">Click me</button></li>
    <!-- ko foreach: someElemets-->         
    <li>
        <span data-bind="text: someText"></span>
    </li>    
    <!-- /ko -->
</ul> 

Answer 2

以下将做到这一点：

<!-- ko template: { name: 'template-name', data: vm } --> <!-- /ko -->

Answer 3

我不知道在模板内访问索引的简单方法。您可以使用如何使用带有特殊第一个元素的 foreach中所述的模板选项？

您的代码将类似于：

<ul data-bind="template: { name: 'someTemplate', foreach: someElemets, templateOptions: { first: someElemets()[0]} }">
</ul>

<script id="someTemplate" type="text/html">
    <li>
    {{if $item.first === $data}}
      <button data-bind="click: doSomething">Click me</button>
    {{/if}}
    <span data-bind="text: someText">
    </li>
</script>