4

我正在为骨干应用程序使用下划线模板引擎。截至目前，我在<head>. 它越来越难以维护。到目前为止，我看到的大多数管理模板的解决方案最终都需要它们是 js 文件。这也是一个令人头疼的问题，我更喜欢它们是用于编辑目的的 html 文件。

我看了一下 requirejs 并不确定我是否需要它，因为它有点围绕着一种更模块化的方法，我现在不能说我正在使用（尽管我很快会）。

管理模板并根据需要加载/缓存它们的最佳方式是什么？

4

2 回答 2

5

就个人而言，我的公司需要一个强大的解决方案，所以我们选择了：

  • Require.js - 用于模块加载
  • Handlebars - 提供比 Underscore 更强大的模板
  • HBS - 来自 Alex Sexton 的出色 require 插件，可处理通过 Require 引入已编译的模板

通过这个设置，我可以将所有模板保存在它们自己的文件中，然后使用它们，我有这样的文件：

define(['template!path/to/someTemplate'], function(someTemplate) {
    var MyNewView = BaseView.extend({template: someTemplate});
    $('body').append(new MyNewView().render().el);
}

（你可能猜到我们有一个名为 BaseView 的基本 Backbone 视图，它使用视图的模板属性来呈现视图）。

现在，话虽如此，如果您不需要如此强大的设置，那么 Require 可能不适合您。在这种情况下，我会执行以下操作：

  1. 将所有模板放入一个或多个 HTML 文件中；将它们包装在脚本标签中，如下所示：

    <script id="dummyTemplate" type='text/template'>
<span>I'm a template!</span>
</script>

  2. 在您的服务器端编写一些代码以将这些 HTML 文件包含在您发送给客户端的主 HTML 文件中

  3. 编写一个函数，该函数接受模板 ID，获取该元素的文本，将其编译为模板，然后返回该模板（如果需要，可以缓存已编译的模板……当然，我不认为使用 Underscore 模板你甚至需要编译，所以你可以跳过所有这些）。

  4. 使用您的函数访问您的模板：$("#something").html(templateFunc('dummyTemplate').template())

这将允许您将模板存储在 html 文件中（用于语法着色），但仍然可以在 JS 中方便地访问它们。您还可以根据需要在任意数量的文件之间划分模板，只要您可以编写包含逻辑来引入它们。

但是，如果您确实选择了 Require，请务必查看 HBS 插件。如果您还没有看过 Handlebars 模板，您可能想看一下；它们比下划线的要强大得多（但就像任何好的模板系统一样，不要考虑太多的逻辑）。

于 2012-12-21T22:20:20.323 回答
0

Not sure what you mean by it being unmaintainable. Is it just a long list?

You don't need to keep your templates in the head. They can be at the bottom of your body as well. They just need to be defined before you try to use them.

One thing you might look into, depending on the server technology you are using would be to separate your templates into a different HTML file and include it at runtime.

于 2012-12-21T22:17:55.647 回答