避免克隆HTMLTemplate来检索innerHTML?

时间:2017-02-07 11:20:19

标签: javascript html5 performance underscore.js-templating html5-template

我拥有<template>标签中的所有模板以提高运行时性能(避免渲染),但我想知道当我需要其内容来编译我的Underscore模板时是否正确使用它们。 我想要的是DOM元素的字符串内容,但是我似乎无法在不从shadow DOM中克隆它的情况下访问它。我这样做:

function compileTemplate(templateId){
    var el = document.getElementById(templateId);
    var templateMarkup = _.unescape(el.cloneNode(true).innerHTML);
    return compiledTemplate = _.template(templateMarkup);
}

这有效,但是有效率可以避免克隆吗?

1 个答案:

答案 0 :(得分:1)

您应该能够直接获取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>