我有一个HTML代码块
<div class="modal-comment-content">
<ul class="list-inline">
<li><a href="#"><img src="/defaultpic.jpg" width="100" class="img-circle"></a></li>
<li>
<ul class="list-unstyled">
<li><a href="#" class="comment_username">John D.</a></li>
<li class="comment_created_at">~ 4 hours ago</li>
</ul>
</li>
</ul>
<p class="comment_comment">This is a completely random sentence. This is the second sentence. Closing sentence right here.</p>
<hr>
</div>
我有一个迭代在一个对象数组上的for循环。
for (var i = 0; i < json.length; i++)
{
var user = json[i].user.first_name + ' ' + json[i].user.last_name.charAt(0) + '.';
var comment = json[i].comment;
var created_at = json[i].created_at;
}
我想将html代码块用作&#39;模板&#39;对于数组对象的每次迭代。关于如何做到这一点的任何想法?的问候,
答案 0 :(得分:2)
根据项目的规格,有几种方法:
如果您知道自己的用户属于capable browsers,则可以使用新的HTML模板功能。
如果你的项目足够大并且你知道你经常使用这种代码,你可以使用类似Handlebars之类的东西来以简单和可维护的方式处理模板。
最快(最脏)的方法是创建一个返回构建的HTML字符串的函数,然后将它附加到DOM:
function buildCard(person) {
return '<div class="card"><h2>'+person.name+'</h2><p>'+person.details+'</p></div>';
}
答案 1 :(得分:2)
如果您使用的是Angular JS,则始终存在NG重复标记并将HTML代码(这是您的模板)绑定到模型。这是文档:
https://docs.angularjs.org/api/ng/directive/ngRepeat
如果您正在努力快速破解,并且使用框架不符合您的兴趣,您可以随时执行此类操作
// create the template variable using your div content and some special tokens
var template = '<div class="modal-comment-content">
<ul class="list-inline">
<li><a href="#"><img src="%USER_IMAGE%" width="100" class="img-circle"></a></li>
<li>
<ul class="list-unstyled">
<li><a href="#" class="comment_username">%USERNAME%</a></li>
<li class="comment_created_at">%CREATED_AT%</li>
</ul>
</li>
</ul>
<p class="comment_comment">%COMMENT%</p>
<hr>
</div>';
var jLen = json.length;
var parentDiv = $('#parentDiv');
// create and attach a new 'Div' to some parent
// using the template, replacing the tokens with dynamic values from the list.
for (var i = 0; i < jLen; ++i)
{
var user = json[i].user.first_name + ' ' + json[i].user.last_name.charAt(0) + '.';
var comment = json[i].comment;
var created_at = json[i].created_at;
var divContent = template.replace('%COMMENT%', comment).replace('%CREATED_AT%', created_at).replace('%USERNAME%', user);
parentDiv.append(divContent);
}