Javascript 中的 HTML 模板？没有在页面中编码？

Question

我是一名主要从事 Perl 服务器端工作的网络人员，我正在慢慢得出一些结论。

• 通过 Javascript 完成大部分代码并通过 AJAX 来回传递数据比点击提交并重新加载大部分相同的页面要好得多
• 我喜欢 jQuery，因为我喜欢 CSS，将又长又吓人的定义链接在一起很有趣
• 那个模板的东西有些东西。

您希望您的 HTML 元素看起来像您的 HTML 元素，并且在 HTML 中定义它更容易：

 <div class="sidebar_elem">
     <a href=""> TEXT</a>
</div>

而不是在 Javascript 或 jQuery 中拼凑相同的内容：

 ( '<div/>' )
     .attr('id' , 'sidebar_elem' + i )
     .addclass( 'sidebar_elem' )
     ;
( '<a/>' )
     .attr('href' , link_url )
     .appendTo( '#sidebar_elem' + i )
     ;

这就是说我不再是一个模板不可知论者，但我不知道该相信哪个模板工具。我研究了一些基于 jQuery 的模板插件，但我还没有对它们中的任何一个感到满意，在部分原因是因为我看到的那些似乎想将所有代码放入页面本身，这打破了我一直背诵的“只有标记进入 HTML 文件，只有样式进入 CSS 文件，只有代码进入 JS 文件”的口头禅.

因此，我正在寻找一种基于 Javascript 的模板工具，它可以让我将模板放在外部文件中，这样我就可以让一个模板更改涵盖一系列网页。如果它是基于 jQuery 的，那很好，我需要学习的东西更少，但这不是一个交易破坏者。

原文由 Dave Jacoby 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

EJS 怎么样？

他们页面上的示例：

“EJS 结合数据和模板来生成 HTML。”

数据：

 {title: 'Cleaning Supplies',  supplies: ['mop', 'broom', 'duster'] }

模板：

 <ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>

结果：

• 拖把
• 扫帚
• 除尘器

原文由 cofiem 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

那里有几个不错的：

小胡子.js

纯.js

JSON模板

如果你想要一个 jQuery 版本， Tempest 看起来不错。

原文由 Sean Vieira 发布，翻译遵循 CC BY-SA 2.5 许可协议