jQuery 模板注入 ;在每个 foreach 项目上？为什么？

Question

我正在使用带有 Knockout 的 jQuery 模板，由于某种原因，当使用 foreach 时， 会神奇地插入到每个项目之间。这是为什么？我该如何摆脱它？

<ol data-bind='template: { name: "list_item_template", foreach: showable }'></ol>

<script type="text/html" id="list_item_template">
    <li class="listItem clearfix" id="list_item_${id}">
         ${title}
    </li>
</script>

结果是：

<ol data-bind='template: { name: "list_item_template", foreach: showable }'>
 <!---->
 <li class="listItem clearfix" id="list_item_301">Stuff</li> 
 <!---->
 <li class="listItem clearfix" id="list_item_302">Stuff</li> 
 <!---->
 <li class="listItem clearfix" id="list_item_303">Stuff</li> 
 <!---->
 <li class="listItem clearfix" id="list_item_304">Stuff</li>  
</ol>

谢谢

Answer 1

一些想法：
(1) 您是否确认您使用的是最新版本的jquery.tmpl.js？

https://raw.github.com/jquery/jquery-tmpl /master/jquery.tmpl.js

我假设你的 viewModel 工作正常？这是我在本地测试中使用的视图模型。我猜你的看起来很相似？

var vm = {
    showable: ko.observableArray([
        { id: 0, title: 'foo' },
        { id: 1, title: 'bar' },
        { id: 2, title: 'baz' },
        { id: 3, title: 'bam' }
        ])
};

(2) 顺便说一句，我的理解是 Knockout 很快就会用 jsRender 取代 jquery.tmpl，所以希望你不要太执着于 .tmpl：

https://github.com/BorisMoore/jsrender

(3) 作为一种解决方法，您是否考虑过使用淘汰赛本身来代替模板的使用？这将消除您对 jquery.tmpl 的依赖。所以你的模板看起来像这样：

<script type="text/html" id="list_item_template">
    <li data-bind="text:title, attr:{id:'list_item_'+id}" class="listItem clearfix" ></li>
</script> 

Answer 2

我没有直接回答你的问题，但我有一个潜在的解决办法。

我不知道为什么 jQuery tmpl 在每个项目上注入注释。然而，我怀疑是否真的是 jQuery Tmpl 注入了注释，而不是 KnockoutJS。要进行验证，请尝试使用不带 KnockoutJS 的模板，看看 HTML 注释是否仍然出现。

最后，请注意最新版本的 Knockout (1.3 beta)有自己的原生模板引擎；您也许可以使用本机模板引擎来解决此问题。