Javascript中的HTML模板？没有在页面编码？ [英] HTML Templates in Javascript? Without coding in the page?

问题描述

我是一个网络人，主要做Perl服务器端的事情，我正在慢慢得出一些结论。

I am a web guy doing mostly Perl server-side stuff, and I'm slowly coming to a few conclusions.

• 通过Javascript完成大部分代码并通过AJAX来回丢弃数据要比提交和重新加载要好得多一个大致相同的页面


• 我喜欢jQuery，因为我喜欢CSS，把很长很长的和可怕的定义链接在一起很有趣


• 有一些模板化的东西。

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

You want your HTML elements to look like your HTML elements, and it's easier to define that in HTML:

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

比Javascript或jQuery中的相同：

Than it is to cobble up the same in Javascript or jQuery:

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

这就是说我不再是模板不可知论者，但我不知道是哪个模板我已经研究了一些基于jQuery的模板插件，但是我还没有对它们中的任何一个感到高兴，部分原因是因为我看过的那些似乎想把所有代码放到页面本身，打破了只有标记进入HTML文件，只有样式进入CSS文件，只有代码进入JS文件我不断背诵的口头禅。

This is to say that I am no longer a templating agnostic, but I don't know which templating tool to believe in. I have looked into some jQuery-based templating plugins, but I have yet to become happy with any of them, in part because the ones I've seen seem to want to put all that code into the page itself, which breaks the "Only markup goes into HTML files, only style goes into CSS files, only code goes into JS files" mantra I keep reciting.

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

So, I'm looking for a Javascript-based templating tool that would allow me to have my templates in an outside file so I can have one template change cover a series of web pages. If it's jQuery-based, that's great, less stuff I have to learn, but it isn't a deal-breaker.

推荐答案

EJS <怎么样？ / A>？

How about EJS?

他们页面的示例：

EJS将数据与模板结合起来生成HTML。

"EJS combines data and a template to produce HTML."

数据：

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

模板：

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

结果：

• 拖把


• 扫帚


• duster

这篇关于Javascript中的HTML模板？没有在页面编码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！