名词解析
template
template内容模板元素,是一种用于保存客户端内容机制,此内容在加载页面时不会呈现,运行时可被js实例化。
DocumentFragment表示一个没有父级文件的最小文档对象,常被作为一个轻量版的Document使用。
是Dom节点,不是真实Dom树的一部分。在Dom树中,文档片段被其所有子元素代替。
因为文档片段存在内容中,不存在Dom树中,将元素插入文档片段时,不会引起回流。
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
if('content' in document.createElement('template')){
let t = document.querySelector('#productrow');
td = t.content.querySelectorAll('td');
td[0].textContent = '1235646565';
td[1].textContent = 'Stuff';
let tb = document.getElementsByTagName("tbody");
let clone = document.importNode(t.content, true);
tb[0].appendChild(clone);
// 创建新行
td[0].textContent = '0384928528';
td[1].textContent = 'Acme Kidney Beans';
let clone2 = document.importNode(t.content, true);
tb[0].appendChild(clone2);
}
componentRef
viewContainer
viewContainerRef
可以包含一个或者多个视图的容器
templateRef
内嵌模板,可用来创建内嵌视图
embeddedViewRef
内嵌视图
elementRef
对视图中某个原生元素的包装器。