jquery - 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 模板语言 - 那里有很多：

• 下划线.js；
• 小胡子.js ;
• 玉;
• 车把.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

您正在寻找一些模板。有许多：

• 车把
• 霍根
• 灰尘.js
• 胡子
• 下划线模板
• jQuery 模板

Answer 3

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