在jQuery模板中使用KnockoutJS模板

Question

我有一個jQuery模板，我想在這裏使用一個KnockOutJS模板。

我不能使這項工作，因爲這個例子說明：http://jsfiddle.net/maate/bwmcR/1/。

但是，當KnockOutJS模板本身放置在jQuery模板範圍之外時，它會工作：http://jsfiddle.net/maate/bwmcR/2/。

看來問題與模板數據變量的範圍有關（例如，我可以訪問subTemplate內的${test}變量）。

有誰知道如何使這項工作？

Br。 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/