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的模板，并循环遍历子项，但这会在每次更改时呈现整个模板，而不仅仅是更新的项（{ {1}}），即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/

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

1 个答案: