敲除模板绑定答案

【问题标题】：knockout template binding敲除模板绑定
【发布时间】：2012-02-14 12:16:42
【问题描述】：

我有一个通过模板绑定填充的 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 将是渲染后的最后一个。解决这个问题的最佳方法是什么？

【问题讨论】：

标签： knockout.js knockout-templating

【解决方案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>

【讨论】：

没错。流绑定的无容器（html/ko 注释）控制非常适合这种情况。您可以在其中执行 foreach、if、ifnot、with 和 template，而无需仅为 KO 创建 DOM 元素。

【解决方案2】：

下面会做：

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

【讨论】：

【解决方案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>

【讨论】：

如果我想使用那个变体，我应该将空的第一个元素添加到 someElemets 数组？看起来像个骗子:)
您可以将 {{else}} 替换为 {{/if}}，以便始终呈现。我将编辑我的答案。
一个问题，也许有人知道为什么当我使用 $data 和 $item 关键字时 - 模板未呈现，但是当访问通过 ViewModel 字段名称传入 foreach 的元素时 - 一切正常，例如，我将 viewModel 与用户数组绑定（使用单个 name 字段），然后绑定到 name 在模板中工作，但是在使用 $data 或 $item 时 - 无法正常工作
@sll - 你应该可以使用 $data，虽然我相信 $item 属于 tmpl，所以如果你使用 KO 原生模板，那么你将无法使用 $item。如果您仍有问题，可以发布一个新问题。