避免克隆 HTMLTemplate 来检索 innerHTML?
Avoid cloning HTMLTemplate to retrieve innerHTML?
我在 <template>
标签中拥有所有模板以提高运行时性能(避免渲染),但我想知道当我需要它们的内容来编译我的 Underscore 模板时我是否正确使用它们。 我想要的是DOM元素的字符串内容,但我似乎无法访问它而不从影子DOM克隆它。我这样做:
function compileTemplate(templateId){
var el = document.getElementById(templateId);
var templateMarkup = _.unescape(el.cloneNode(true).innerHTML);
return compiledTemplate = _.template(templateMarkup);
}
这行得通,但是有没有更有效的避免克隆的方法?
你应该能够直接获取 innerHTML
字符串而无需克隆:
function compileTemplate(templateId) {
var el = document.getElementById(templateId);
var templateMarkup = _.unescape(el.innerHTML);
return compiledTemplate = _.template(templateMarkup);
}
function compileTemplate(templateId) {
var el = document.getElementById(templateId);
console.log( el.innerHTML )
}
function test() {
compileTemplate('T1')
}
<template id=T1>
HTML inside
</template>
<button onclick=test()>Compile</button>
我在 <template>
标签中拥有所有模板以提高运行时性能(避免渲染),但我想知道当我需要它们的内容来编译我的 Underscore 模板时我是否正确使用它们。 我想要的是DOM元素的字符串内容,但我似乎无法访问它而不从影子DOM克隆它。我这样做:
function compileTemplate(templateId){
var el = document.getElementById(templateId);
var templateMarkup = _.unescape(el.cloneNode(true).innerHTML);
return compiledTemplate = _.template(templateMarkup);
}
这行得通,但是有没有更有效的避免克隆的方法?
你应该能够直接获取 innerHTML
字符串而无需克隆:
function compileTemplate(templateId) {
var el = document.getElementById(templateId);
var templateMarkup = _.unescape(el.innerHTML);
return compiledTemplate = _.template(templateMarkup);
}
function compileTemplate(templateId) {
var el = document.getElementById(templateId);
console.log( el.innerHTML )
}
function test() {
compileTemplate('T1')
}
<template id=T1>
HTML inside
</template>
<button onclick=test()>Compile</button>