在 foreach 中使用 knockoutjs 中的模板时，是否可以保留原始布局？

Question

我在使用一些预定义的li 元素在 ul 中渲染模板项目时遇到问题，我希望模板引擎能够尊重：

这就是我想要实现的目标：

<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
    <li class="first">some pre-info</li>
     //this is where I'd like knockout to render my templates
    <li class="last">som-post info</li>
</ul>

这是我实际得到的：

<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
    //this is where all my templateItems get rendered
    <li class="first">some pre-info</li>
    <li class="last">som-post info</li>
</ul>

一个明显的替代方法是使用渲染整个 ul 的模板，并循环遍历子项，但这会在每次发生更改时渲染整个模板，而不仅仅是更新的项 (li )，即preferred way。

Answer 1

最好的选择是使用 KO 1.3（在 RC 中）中提供的无容器控制流绑定。

看起来像：

<ul>
  <li class="first">some pre-info</li>
  <!-- ko foreach: itemsToRender -->
    <li class="item" data-bind="text: name"></li> 
   <!-- /ko -->
  <li class="last">some post-info</li>
</ul>

或

<ul>
  <li class="first">some pre-info</li>
  <!-- ko template: { name: 'itemTemplate', foreach: itemsToRender } -->
  <!-- /ko -->
  <li class="last">some post-info</li>
</ul>

<script id="itemTemplate" type="text/html">
    <li class="item" data-bind="text: name"></li> 
</script>

示例：http://jsfiddle.net/rniemeyer/tzJU3/