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

Question

我是一个 web 的人，主要从事 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 的模板工具，它允许我将模板放在外部文件中，这样我就可以让一个模板更改涵盖一系列 web 页。 如果它是基于 jQuery 的，那很好，我需要学习的东西更少，但这不是一个交易破坏者。

Answer 1

那里有几个好的：

Mustache.js
Pure.js
杰森模板

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

Answer 2

我知道的2个库不混合模板编码和HTML标记是chain.js和PURE

chain只做DOM操作。
PURE使用DOM和innerHTML的混合，因为单独的DOM可以很慢地渲染更大的模板。

我是PURE的主要贡献者，我们创建它以在您描述的ajax模型上构建Web应用程序。

Answer 3

看看这个http://ejohn.org/blog/javascript-micro-templating/ 。 由jQuery的创建者John Resig制作，这个甚至不需要jQuery，而且它很小。 它还将模板存储在脚本标记中（Daniel的答案）。 示例模板：

<script type="text/html" id="user_tmpl">
    <% for ( var i = 0; i < users.length; i++ ) { %>
        <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    <% } %>
</script>

也许你可以使用src属性加载它们，如果你真的需要它们在单独的文件中，我认为这不是一个明智的想法，因为它意味着对服务器的额外往返。 因此，最后，为了优化，您可以将它们存储在单独的文件中，但将它们嵌入到需要它们的页面中。

Answer 4

由于没有明确定义的API和最好的模板库，我建议你选择一个积极开发的库。 下面，我简要介绍了两个正在积极开发的库。

jQuery团队决定不再积极开发或维护jQuery模板，因此我强烈建议不要使用它。 请参阅此博客条目 。

您可以使用JsRender按照JsViews采取的jQuery模板，甚至更像数据链接提供的全部功能。 您可以找到JsRender和JsViews的演示。 我建议使用这些库，因为它们是由jQuery UI团队积极开发的，但要注意它们仍然不是beta！

Mustache是​​另一个正在积极开发的模板解决方案，它通过组合条件标记和枚举标记来简化模板。 它还提供强大的功能，如倒置部分，部分和高阶部分，语法简单。 Mustache也是最快的模板解决方案之一。 请参阅Brian Landau的博客 。 我个人认为胡子是一个很好的模板解决方案，因为它具有简单的语法并且表现良好。

Answer 5

你应该看看谷歌闭包模板。 它完全独立，因此您可以将它与任何您想要的库一起使用。 这是一个用java编写的模板工具。

http://code.google.com/closure/templates/docs/helloworld_js.html

它允许您在服务器上创建模板，在其上运行java“编译器”，输出是一个以json为参数的javascript函数。

{namespace examples}
/**
 * Greets a person using "Hello" by default.
 * @param name The name of the person.
 * @param? greetingWord Optional greeting word to use instead of "Hello".
 */
{template .helloName}
  {if not $greetingWord}
    Hello {$name}!
  {else}
    {$greetingWord} {$name}!
  {/if}
{/template}

这将生成一个名为examples.helloName的函数，可以调用它

它们的格式非常适合IDE，在编辑模板时我会突出显示所有HTML语法

examples.helloName({name: 'Ana', greetingWord:"Howdy"});

您可以从模板中调用其他模板，它会自动html转义您的数据（除非您告诉它不要），提供双向支持。

另一件好事是模板工具也可以生成java代码。 因此，有人编写必须支持禁用脚本的浏览器的应用程序可以在必要时在服务器上生成HTML。

最后但并非最不重要的是，与其他js模板系统（）不同，模板在服务器上进行解析，因此客户端只需要对模板和数据进行合并，模板的解析是作为构建步骤完成的。服务器。

http://dev.sencha.com/deploy/dev/docs/?class=Ext.XTemplate是一个完全在客户端上运行的模板工具的示例。 这种方法存在两个问题，模板的解析是在客户端完成的，你的html必须嵌入到javascript字符串中。 但是，一些IDE（Intellij）将突出显示JS字符串中的HTML）。

Answer 6

JAML Code怎么样？

http://github.com/edspencer/jaml

类似于上面的一些，但我相信更合乎逻辑......

这是通过JSON / JavaScript定义模板，然后使用JavaScript中的函数将参数传递给模板的概念，该模板将其呈现并作为元素返回。

存在各种JavaScript框架的实现。

Answer 7

EJS怎么样？

他们的页面示例：

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

数据：

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

模板：

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

结果：

• 拖把
• 扫帚
• 掸

Answer 8

试试这个： https://www.npmjs.com/package/jlate

使用 CDN：

<script src="https://cdn.jsdelivr.net/combine/npm/lodash,npm/jlate@0.0.2/jlate/JLate.min.js"></script>

我在下面给出了工作示例，您可以将 github 模板 url 替换为您自己的模板示例：

https://raw.githubusercontent.com/webphonix/JLate/main/test_project/template/weblate_loop.html

<div class="row">
  <% _.each(names, function(n){ %>
  <div class="col-md-6"><%- n.name %></div>
  <% }) %>
</div>

 var author = [{ name: "Guru" }, { name: "Gurudev" }, { name: "Test" }, { name: "Webphonix" }, ]; $$("#my_temp").jlate({ names: author });

 <script src="https://cdn.jsdelivr.net/combine/npm/lodash,npm/jlate@0.0.2/jlate/JLate.min.js"></script> <div> <jlate id="my_temp" src="https://raw.githubusercontent.com/webphonix/JLate/main/test_project/template/weblate_loop.html" type="template"> Loading... </jlate> </div>

Answer 9

试试 JLate：

https://www.npmjs.com/package/jlate

使用版本 0.0.2 而不是 0.0.1

使用下面的 cdn：

<script src="https://cdn.jsdelivr.net/combine/npm/lodash,npm/jlate@0.0.2/jlate/JLate.min.js"></script>

Answer 10

怎么样http://www.enfusion-framework.org

像这样的东西：

<span template>Our telephone number is {phone}.</span>

<span session>You are logged in as {nickname}.</span>

Answer 11

使用script块。

<script id="someId" type="text/html">
   <!-- your template here -->
</script>

和许多JQuery插件之一。

http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

Answer 12

我有一个名为stencil.js的模板引擎 ，我相信它很可爱。 它通过jquery-haml DOM构建引擎与jQuery一起使用。

编写模板（可以将其放入外部文件并解码为JSON）：

["%div.sidebar_elem"
    ["%a", { href: { key:'link' } },
        { key: "text" }
    ]
]

并通过stencil和您的数据运行它：

$("#parent").stencil(template, { link: "http://example.com", text: "Click me!" });

在stencil.js GitHub项目中有更多示例，但我认为这正是您正在寻找的。

它可以使用更多的实用程序方法，并且未完成的数据绑定组件的一些代码仍然在master分支中，所以如果你感兴趣我给我发表评论，我会看看我是否可以清理它。

Answer 13

查看ibdom，以及一些背景/历史： 推荐用于JQuery的JavaScript HTML模板库？

Answer 14

可以随时使用jQuery-Templates： http ： //api.jquery.com/category/plugins/templates/