如何最好地组织 Underscore.js 模板以与 Backbone.js 一起使用？答案

【问题标题】：How to best organize Underscore.js templates for use with Backbone.js?如何最好地组织 Underscore.js 模板以与 Backbone.js 一起使用？
【发布时间】：2012-07-12 21:57:06
【问题描述】：

目前我有我的 main.jade 文件，该文件是在 Node.js 上使用 Express.js 提供的。在玉文件的头部，我有我所有的模板。正如您可能理解的那样，这很快变得不守规矩。我使用以下方法从 Backbone.js 加载模板：

template:_.template($("#phone-tmplt-taskRow").html())

我的应用将有三个版本：移动版、平板电脑和桌面版。我想知道组织模板的最佳方式应该是什么。我不想在我的 html 文件的头部列出大约 30 个模板。我应该如何组织我的模板？我希望以某种方式拥有 3 个文件，每个版本一个。我不想根据版本提供与 node.js/express.js 不同的 URL。

【问题讨论】：

没有具体的方法可以做到这一点。但我只是这样做了尝试将页面中的所有模板作为<script type="text/template"> 这给了我最好的可读性和我可以查找模板的地方。一个 C# 解析器，它剥离所有 <script type="text/template">，然后将它们混合到 javascript 中的 Hash
这正是我不想做的。我不想在一个巨大的 HTML 文件中排列 30 个模板。
如果您知道 C#，我可能会与您分享代码。否则，您可以使用 Andrewway 的优秀 Cassette 库，它会自动为您完成所有这些操作
我知道 C#，我很想看看你在用什么。
您可能还想先尝试一下。它非常适用于 Hogan.js getcassette.net。由于 Twitter 自己使用 Hogan，因此您可能会暗示它很棒 :)

标签： node.js backbone.js express underscore.js pug

【解决方案1】：

您可以在文件（例如 phone-tpl.html）中分离模板并将它们全部放在 /templates 目录中。然后你可以通过 AJAX 加载它们中的每一个，在这种情况下，我建议你有一个缓存（在内存或 localStorage 中）以最小化请求数。

另一个选择是使用 RequireJS。 Addy Osmani 建议使用文本！加载模板的插件。 Alex Sexton 提出了一个更复杂的选项，您不将模板作为文本加载，而是作为 Javascript 函数进行预编译（当使用 r.js 优化时，所有模板都会捆绑在一起，因此在生产中所有模板都是函数，您不需要向服务器请求它们)。

链接：

http://alexsexton.com/talks/backboneconf2012/
http://addyosmani.github.com/backbone-fundamentals/
RequireJS 模板插件：https://github.com/jrburke/requirejs/wiki/Plugins#wiki-templating

【讨论】：

Dust.js 模板提倡预渲染到 js 函数，然后这些都可以存储在单独的 js 文件中，并通过 AMD 加载器或通过 AJAX 拉入
完全一样，与 Handlebars.js 或 Hogan.js 相同。那里有很多选择;)。检查这个：engineering.linkedin.com/frontend/…
是的，这就是让我进入dust.js :) 喜欢它！还没有尝试过很多其他的tbh

【解决方案2】：

我最终将 Jade 模板用于一切——服务器端和客户端。没有下划线模板。我使用了http://projects.jga.me/clientjade/，它采用jade模板并将它们预编译成一个js文件。优点：

您的 html 文件中没有模板。更小、更合理的标记
预编译的翡翠模板飞速发展
Jade 文件仍然可以用来渲染 html
单一模板系统

clientjade 不监视文件更改。所以我做了一个蛋糕任务来处理这个问题。如果你走那条路，请查看我的蛋糕任务 - https://gist.github.com/4041281

【讨论】：

【解决方案3】：

您可以将它们放入 js 文件中并使用 requirejs 加载它们。这会产生非常可读的代码并减少对 dom 的依赖。

【讨论】：

【解决方案4】：

我实际上最终使用了'include' feature of jade.js 来做我需要的事情。我的应用程序的每个版本都有三个 .jade 文件，我将所有这些文件都包含在我的 main.jade 中。我假设我将来最终会在我的项目中使用 require.js，所以谢谢你的提示，eabait。

【讨论】：