jQuery动态创建复杂的HTML片段

Question

我希望使用jQuery生成（或者至少用JSON数据填充某种模板并附加到列表中）半复杂的HTML div元素。数据采用JSON格式（如果重要），对于每个父条目，我希望将另一个div添加到轮播类型元素。

长篇陈述，例如：

$('#list').append('<li><div id=" + entry.id +"><span id="highlight> + entry.name + <span/><div id="picture" ....

会起作用但很难维护（原谅错误只是为了说明问题）。必须有一种更有效的方式。

感谢。

Answer 1

你正在研究javascript模板语言 - 那里有很多：

• underscore.js;
• mustache.js;
• jade;
• handlebars.js;
• 更多......

我们的想法是将数据及其视图分开：

var myUser = { name : 'John', lastname : 'Doe' };

$('#awesomeDiv').html(
    someTemplateFunction( { user : myUser } )
);

而someTemplateFunction()将在其正文中保存：

<p>Hello <strong><%=user.name %> <%=user.lastname %></strong></p>

通过持有我的意思是模板库能够解析这样的模板[来自DOM或来自外部文件]并将其呈现给新的DOM元素。

我的选择是 underscore.js ，因为它是一个非常小但很有用的库，随时可以四处看看。

Answer 2

你正在寻找一些模板。有很多：

• Handlebars
• Hogan
• dust.js
• Mustache
• underscore templates
• jQuery templates

Answer 3

不知道它是否适用于您正在做的事情，但最近我遇到了类似的问题，我不想'插入'我的js用html插入。我的解决方案是在页面中插入所有html并隐藏它，以便在需要时我可以显示它，或者在某些情况下，我复制所需的div。