most popular intro表示我可以在文档中轻松克隆html模板。
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
“模板”一词意味着您不会按原样复制粘贴,不加修改。模板意味着您要使用特定值更新某些变量。它建议使用以下方法更新节点:
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
不完美吗?有querySelector来获取元素,以便您可以更新其属性。我只是不明白他为什么在克隆之前更新模板。但这不是我的问题。真正的问题是,在我的情况下,更新变量的位置是未知的。它可以是任何模板结构中的属性或innerText。我相信这是最普遍和最频繁使用的模板。因此,我可以确保变量ID在模板中是唯一的,例如#reply here
<template id="comment-template">
<li class="comment">
<div class="comment-author"></div>
<div class="comment-body"></div>
<div class="comment-actions">
<a href="#reply" class="reply">Reply</a>
</div>
</li>
</template>
应该更新#reply
,但作者没有解释如何做到这一点。我成功地在原始模板document.querySelector('#mytemplate').innerHTML.replace(id, value)
上使用了innerHTML,但这会破坏模板供以后使用,如上所述。我无法更新克隆的文本。这可能是因为template.clone生成了一个没有innerHTML的文档片段。但是,在推动之前,我决定研究替代品,因为我知道innerHTML / outerHTML不是很标准。
Alternative for innerHTML?检查innerHTML的替代品,但同样,他们对模板的假设过多。它们不是仅仅用用户值替换某些特定标识符,而是完全重新创建模板,这会破坏模板的整个概念。一旦在变量估值中重新创建整个代码,模板就失去了任何意义。那么,<template>
应该如何使用?
答案 0 :(得分:2)
这是我的解决方案,valuate
功能
<div id="div1">env: </div>
<template id="template1">
<a href="#ref">var1=var2</a>
</template>
<script language="javascript">
function valuate(template, targetParent, dict) {
var t = document.querySelector('#' + template);
var clone = t.cloneNode(true)
for (key in dict) {
clone.innerHTML = clone.innerHTML.replace(key, dict[key])
}
var fragment = document.importNode(clone.content, true)
var canvas = document.querySelector('#' + targetParent);
canvas.appendChild(fragment);
//alert(canvas.innerHTML)
}
valuate("template1", "div1", {var1:"1+1", var2:2, "#ref":"abc.net"})
</script>
它采用模板,字典和目标元素。不幸的是,it fails for SVG hierarchies。你不知道为什么吗?
答案 1 :(得分:1)
再次使用<template>.querySelectorAll
选择元素,setAttribute
更改href
值
var a = <template>.querySelectorAll("a[href='#reply']");
a[0].setAttribute("href", <url>)
这是一个更通用的功能。它更改了克隆模板中所选元素的属性,当然这是非常基本的,
//object = the cloned template.
//selector = the selector argument which selects all nodes.
//attribute = the attribute to change.
//value = the value that needs to be set to the attribute.
function changeTemplateValues(object, selector, attribute, value)
{
elements = object.querySelectorAll(selector);
if (elements.length == 0)
{
return false; //stop executing. No elements were found.
}
else if (!attribute && !value)
{
return elements; //no attributes and values are set, return nodelist;
}
else
{
if (attribute)
{
//loop over all selected elements to change them.
for (var i = 0; i < elements.length; ++i)
{
if (attribute.match(/innerHTML|textContent|text|nodeValue/g) )
{
elements[i][attribute] = value;
}
else
{
elements[i].setAttribute(attribute, value);
}
}
}
else
{
//No attribute return false;
return false;
}
}
}