HTML5 rocks确实说我可以嵌套模板。但当我使用它们时,就像下面这样,它们不会渲染。
<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
,并且我会得到一个hi或那里。不是你好。
我不能理解为什么模板是嵌套的而不是独立使用的真正目的。嵌套模板不会使事情变得复杂吗?
发布于 2020-12-28 02:54:15
为了在那里获得hi,你必须创建一个完整的克隆选择器树(即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
https://stackoverflow.com/questions/32515237
复制相似问题