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 ;
• 玉 ;
• 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,因为它是一个非常小但有用的库,随意环顾四周.