Question

我正在使用下划线模板引擎作为骨干应用程序。截至目前，我在<head>中拥有超过15个模板。它越来越难以维护。到目前为止，我看到管理模板的大多数解决方案最终都需要它们成为js文件。这也很令人头疼，我更喜欢将它们作为html文件进行编辑。

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

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

Answer 1

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

Require.js - 用于模块加载
把手 - 比Underscore提供更强大的模板提供
HBS - 来自Alex Sexton的优秀需求插件，用于处理通过需求

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

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

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

现在，所有这一切，如果你不需要这样一个强大的设置，那么Require可能不适合你。在这种情况下，我会做以下事情：

将所有模板放入一个或多个HTML文件中;将它们包装在脚本标记中，如下所示：
```
<script id="dummyTemplate" type='text/template'>
<span>I'm a template!</span>
</script>
```
在服务器端编写一些代码，将这些HTML文件包含在发送给客户端的主HTML文件中
编写一个获取模板ID的函数，获取该元素的文本，将其编译成模板，然后返回该模板（如果需要，可以缓存已编译的模板...当然，使用Underscore模板我认为你甚至不需要编译，所以你可以跳过所有这些。
使用您的功能访问模板：$("#something").html(templateFunc('dummyTemplate').template())

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

如果您确实选择了要求，请务必查看HBS插件。如果你还没有看过Handlebars模板，你可能会想;它们比Underscore强大得多（但就像任何好的模板系统一样，不允许太多的逻辑）。

Answer 2

不确定你的意思是不可维护的。这只是一长串清单吗？

您不需要将模板保持在头脑中。它们也可以位于身体的底部。在尝试使用它们之前，只需要定义它们。

根据您使用的服务器技术，您可能会考虑的一件事是将模板分成不同的HTML文件并在运行时包含它。

Backbone：管理模板

2 个答案: