在jQuery模板中使用KnockoutJS模板

Question

我有一个jQuery模板，我想在其中使用KnockOutJS模板。

我无法做到这一点，因为这个例子说明了：http://jsfiddle.net/maate/bwmcR/1/。

但是，当KnockOutJS模板本身位于jQuery模板的范围之外时，它会起作用，如下例所示：http://jsfiddle.net/maate/bwmcR/2/。

问题似乎与模板数据变量的范围有关（例如，我可以访问${test}中的subTemplate变量。）

有谁知道如何使这项工作？

溴。的Morten

Answer 1

你拥有的第一个例子是无效的。虽然您想要创建子模板，但它必须位于单独的脚本标记中。你不能在彼此之间嵌入模板，你必须一个接一个地创建它们。 WRONG：

<script id="superTemplate" type="text/html">
...
<script id="subTemplate" type="text/html">
...
</script>
</script>

RIGHT：

<script id="superTemplate" type="text/html">
...
</script>
<script id="subTemplate" type="text/html">
...
</script>

当您在ul上应用子模板时，您定义了它应该与foreach一起使用的数据，因此您将无法读取test，因为它不是项目上的属性。 如果你想要，你可以将它作为templateOption传递，因此它也可以在子模板上使用。

<ul data-bind="template: { name: 'subTemplate', foreach: items, templateOptions: { testValue: 'Value' } }"></ul>

这种方式可以在子模板上使用。

<span data-bind="text: $item.testValue"></span>

另外，我不会使用默认的jQuery模板标签，它对数据绑定更好。

<div id="body" data-bind="template:{name: 'superTemplate'}"></div>

最终会或多或少地做同样的事情。你可以看看这里：http://jsfiddle.net/bwmcR/18/