我的用例如下所示,我填充innerHTML
如下所示。现在问题是我想在forloop的上下文中解析模板文字。有线索吗?
var blog_entries_dom = 'blog_entries';
var blog_entries = [
{
"title": "Hello World",
"id": 2,
"body": "<p>Hello World</p>"
},
{
"title": "World Hello",
"id": 3,
"body": "<p>World Hello</p>"
}
];
var blog_entry_template = `<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
${item.title}
</h2>
<h3 class="post-subtitle">
${item.body}
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> #Created At </p>
</div>
<hr>`;
var populate_children = function (element_id, objects_list, template) {
var element = document.getElementById(element_id);
var html = '';
for (var i = 0; i < list.length; i++) {
var item = list[i]
html += template;
}
element.innerHTML = html;
};
populate_children(blog_entries_dom,blog_entries,blog_entry_template);
答案 0 :(得分:2)
模板文字就是这样:文字。他们会像所有文字一样评估它们出现的位置。它们不是物体,你不能通过它们。
你可以做的是将它们放在一个函数中并传递函数。让函数接受模板需要的东西,并返回评估它的结果。
在您的情况下,您只需将blog_entry_template
更改为箭头功能,然后将其命名为:
var blog_entries_dom = 'blog_entries';
var blog_entries = [
{
"title": "Hello World",
"id": 2,
"body": "<p>Hello World</p>"
},
{
"title": "World Hello",
"id": 3,
"body": "<p>World Hello</p>"
}
];
var blog_entry_template = item => `<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
${item.title}
</h2>
<h3 class="post-subtitle">
${item.body}
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> #Created At </p>
</div>
<hr>`;
var populate_children = function (element_id, objects_list, template) {
var element = document.getElementById(element_id);
var html = '';
for (var i = 0; i < list.length; i++) {
html += template(list[i]);
}
element.innerHTML = html;
};
用法:
populate_children("some-id", blog_entries, blog_entry_template);
答案 1 :(得分:0)
我有其他解决方案,使用原型可能是一个好主意!
String.prototype.replaceTemp = function(replaceObj) {
return this.replace(/{\$(\w{1,20})}/g, function(matchStr, agr) {
if (replaceObj[agr] instanceof Object || replaceObj[agr] instanceof Function) {
var _tempPool = (window.TEMP_POOL = window.TEMP_POOL || []);
var _length = _tempPool.length;
_tempPool[_length] = replaceObj[agr];
if (replaceObj[agr] instanceof Function)
return "TEMP_POOL[" + _length + "](this);"
else
return "TEMP_POOL[" + _length + "]";
} else {
return replaceObj[agr] || "";
}
});
};
var blog_entries_dom = 'blog_entries';
var blog_entries = [
{
"title": "Hello World",
"id": 2,
"body": "<p>Hello World</p>"
},
{
"title": "World Hello",
"id": 3,
"body": "<p>World Hello</p>"
}
];
var blog_entry_template = `<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
{$title}
</h2>
<h3 class="post-subtitle">
{$body}
</h3>
</a>
<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> #Created At </p>
</div>
<hr>`;
var populate_children = function (element_id, objects_list, template) {
var element = document.getElementById(element_id);
var html = '';
for (var i = 0; i < list.length; i++) {
html += template.replaceTemp(list[i]);
}
element.innerHTML = html;
};