创建使用jQuery

Question

多个div我需要根据多少对象都是我收集

<div class="container"> 
    <a href="#">title test</a> 
    <div class="video"> 
    video test 
    </div> 
    </div> 

在我想使用jQuery来达致这创建多个div像下面。

for(i =0 ;i < list.size; i++){ 

$("#wrapper").append(createDiv(list[i])); 

} 

function createDiv(object){ 

return <div class="container"> 
    <a href="object.link">object.title</a> 
    <div class="video"> 
    object.video 
    </div> 
    </div>; 
} 

我觉得太硬编码的这种方式，因为我可能需要重建container类。例如，我可能想要放入另一个div标签或更多链接。我想知道是否有另一种方法可以做到这一点，这将允许我的代码具有灵活性。而不是createDiv返回一个大字符串，我应该使用查询功能，如createElement？

感谢您的任何意见:)

Answer 1

来处理这类问题的最好方法是用一个模板库。模板允许您将HTML标记定义为包含令牌的字符串。

然后，您可以将该模板应用到项目列表，并且它将用每个项目的匹配属性替换这些标记。这消除了循环遍历列表的需要，从而清理了代码。

有几种流行的模板库：

• Mustache
• jQuery Templates（这已被弃用，但仍然被很多人使用）
• Underscore.js

下面是一个简单的例子如何在项目列表上使用jQuery模板：

Underscore.js允许您在实际的.html文档中定义您的HTML，这可以让您的JavaScript文件更加清洁。然后，只要将标记保存在HTML文件中，就可以随意更改HTML模板而不会影响JavaScript。

这里有一篇关于templating with Underscore.js的好文章。