Question

HTML5 rock 确实说我可以嵌套模板。但是当我使用它们时，就像下面一样，它们不会渲染。

<template id ='#outer'>
  <ul>
    <template = '#inner'>
      <li>Stuff</li>
    </template>
  </ul>
</template>

但是，以下作品：

<template id ='#outer'>
  <p>hi</p>
    <template = '#inner'>
      <p>there</p>
    </template>
</template>
<div id="tDiv">

</div>      

    var outer = document.querySelector('#outer');
    var outerClone = outer.content.cloneNode(true);
    var check = outerClone.querySelector('template');
    var innerClone = check.content.cloneNode(true);
    var tDiv = document.querySelector('#temp');
    tDiv.appendChild(innerClone);

但是这样，我可以使用innerClone或outerClone，我得到一个喜欢或那里。不在那里。

我无法弄清楚为什么模板嵌套而不是独立使用的真正目的。嵌套模板是不是很复杂？

Answer 1

如在HTML5Rocks教程中使用模板的问题所述：

激活外部模板不会激活内部模板。那是要说，嵌套模板要求他们的孩子也是手动的激活。

即使我忽略<template = '#inner'>中的拼写错误并假设它是<template id='inner'>，我认为您必须在每个模板上单独调用document.importNode(template.content, true)，然后使用它。在您的示例中，您只是将outerClone附加到仍包含惰性内部模板的DOM。您需要将激活的内部模板内容附加到外部模板，以使它们都呈现。

这jsfiddle是实现这一目标的一种方式。

Answer 2

为了获得 hi there，您必须创建一个完整的克隆选择器树（即 outerClone 和 innerClone），并将其附加到可见的 (tDiv) （模板不可见）

<template id ='#outer'>
  <p>hi</p>
    <template id = '#inner'> // mind the *id* !!
      <p>there</p>
    </template>
</template>
<div id="tDiv">

</div>  

var outer = document.querySelector('#outer');
var outerClone = outer.content.cloneNode(true);
var check = outerClone.querySelector('#inner'); //mind #inner here
var innerClone = check.content.cloneNode(true);
outerClone.appendChild(innerClone);             //append inner to outer
var tDiv = document.querySelector('#temp');
tDiv.appendChild(outerClone);                   //append outer

这里是一个 jsfiddle，代码正在运行

嵌套HTML5 <template>标记

2 个答案: