我需要从jQuery ajax响应构建HTML。我不喜欢在JavaScript中嵌套丑陋的字符串,也不想使用胡须或任何其他模板化脚本。
因此,我采用了一种带有显示的HTML模板的方法:没有一个像下面这样:
<div id="message-template" class="message-tile" style="display: none;">
<div class="profile-thumb"><img src="{{thumb-url}}" width="48" height="48" alt="{{person-name}}" /></div>
<div class="message-data">
<div class="message-info">
<div class="sender-name">
<a href="{{person-url}}">{{person-name}}</a>
</div>
<div class="posted-to">
To <a href="{{posted-to-url}}">{{posted-to-title}}</a>
</div>
</div>
<div>{{message-body}}</div>
</div>
</div>
我希望能够用json对象中的实际值替换{{}}之间的字符串。假设这是在jQuery.ajax onSuccess事件上调用的函数:
function createNewElement(jsonObj) {
var $clone = $('#message-template').clone();
$clone.replaceString("{{person-name}}", jsonObj.personName);
$clone.replaceString("{{thumb-url}}", jsonObj.thumbUrl);
$clone.replaceString("{{person-url}}", jsonObj.personUrl);
// etc
$("#target-container").append($clone);
}
我发明了replaceString方法,但是有类似的东西吗?还是我需要使用find()遍历每个子元素?
实际上,您可以<script type = "text/template">
用来创建自己的模板,这样它就不会在您的页面上呈现:
<script id="message-template" type = "text/template">
<div class="message-tile" style="display: none;">
<div class="profile-thumb"><img src="{{thumb-url}}" width="48" height="48" alt="{{person-name}}" /></div>
<div class="message-data">
<div class="message-info">
<div class="sender-name">
<a href="{{person-url}}">{{person-name}}</a>
</div>
<div class="posted-to">
To <a href="{{posted-to-url}}">{{posted-to-title}}</a>
</div>
</div>
<div>{{message-body}}</div>
</div>
</div>
</script>
这是您替换值的方式:
function createNewElement(jsonObj) {
var $clone = $('#message-template').html();
$clone = $clone.replace("{{person-name}}", jsonObj.personName)
.replace("{{thumb-url}}", jsonObj.thumbUrl)
.replace("{{person-url}}", jsonObj.personUrl);
// etc
$("#target-container").append($clone);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句