Question

我正在开展一个项目，我希望使用JavaScript导入本地存储的HTML模板。

此模板将动态填充我通过访问网站REST API获得的数据。

这是我想要做的一个例子：

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
</head>
<body>
    <div id="loaded-content">
        <!-- Here will be displayed the template -->
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

template.html：

<div id="data">
    <h1 id="data-name">value</h1>
    <p id="first-attribute">value</p>
    <p id="first-attribute">value</p>
    <p id="first-attribute">value</p>
</div>

datas.json：

{
    "datas":
    [
        {
            "name": "value",
            "first-attribute": "value",
            "second-attribute": "value",
            "third-attribute": "value"
        },
        {
            "name": "value",
            "first-attribute": "value",
            "second-attribute": "value",
            "third-attribute": "value"  
        }
    ]
}

对于数据中包含的每个对象，我想再次显示模板。

目前，我使用XMLHttpRequest对象加载模板。我可以显示模板的内容，但无法访问模板的DOM以更改其元素的值。

我应该使用哪种方法正确加载HTML文件？我正在寻找纯Javascript（没有jQuery或其他东西）的东西。

感谢您的帮助=）

Answer 1

您当前的问题是，您当前的模板会导致多个元素具有相同的ID，这是不允许的。

如果您可以控制模板，请将其更改为更传统的模板样式，其中vars被括起来而不是依赖于HTML ID。所以我将你的模板改为：

<div>
    <h1>{{name}}</h1>
    <p>{{first-attribute}}</p>
    <p>{{second-attribute}}</p>
    <p>{{third-attribute}}</p>
</div>

这样我们就可以通过REGEX运行字符串替换，而不是输出然后通过ID查询项目。

假设#content是模板的容器元素，data存储已解析的JSON数据，template存储未解析的模板字符串：

var
cntr = document.querySelector('#content'),
html;

//iterate over data items
data.datas.forEach(function(obj) {

    //grab all var references i.e. {{foo}} and replace them with actual values, if exist
    html = template.replace(/\{\{[^\}]+\}\}/g, function(match) {
        var var_name = match.replace(/^\{\{|\}\}$/g, '');
        return obj[var_name] || '??';
    });

    //append the readied HTML to the content container
    cntr.innerHTML += html;
});

Answer 2

这是一个例子。您可以使用JSON解析器以您需要的格式获取数据。以下是您的操作：创建一个虚拟<div> DOM元素以便稍后推送，使用replace函数将val替换为data变量的值。然后最后将其附加到HTML的div元素。如果您使用XMLHttpRequest获取数据，请将数据传递给template。然后用解析JSON的数据替换占位符value。并使用replace方法执行此操作。它应该工作正常。

var template = document.createElement("div");

var data = "Hello world";

template.innerHTML = "<h1>val</h1>";

template.innerHTML = template.innerHTML.replace("val", data);

document.getElementById("myDiv").appendChild(template);

<div id="myDiv">

</div>

访问导入的本地HTML文件的DOM

2 个答案: