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

发布于 2024-12-19 21:03:49 字数 887 浏览 1 评论 0原文

我在使用一些预定义的 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)，这是首选方式。

原文

I have an issue when rendering templated items within a ul with some pre-defined li elements, that i'd like the templating engine to respect:

This is what I'm trying to achieve:

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

This is what I actually get:

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

An obvious alternative is to use a template that rendered the entire ul, and looped over the child items, but this would render the entire template every time there was a change, and not just the updated items (li), which is the preferred way.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柏林苍穹下 2024-12-26 21:03:49

最好的选择是使用 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/

The best option is to use the containerless control-flow bindings available in KO 1.3 (in RC).

It would look like:

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

Sample: http://jsfiddle.net/rniemeyer/tzJU3/

回复收藏 0 原文

~没有更多了~