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而是另一个带有按钮的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

您可以使用无容器控制流语法，使用注释标记进行数据绑定。不需要模板。 more info

<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

我不知道在模板内部访问索引的简单方法。您可以使用How to use foreach with a special first element?

中所述的模板选项

您的代码类似于：

<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>

敲除模板绑定

3 个答案: