主干:管理模板 [英] Backbone: managing templates
问题描述
我正在将下划线模板引擎用于主干应用程序.截至目前，我在 中有超过 15 个模板.它越来越难以维护.到目前为止，我看到的大多数管理模板的解决方案最终都需要它们是 js 文件.这也很头疼，我更喜欢它们是用于编辑目的的 html 文件.
I'm using underscore template engine for an backbone application. As of now I have over 15 templates in the <head>. Its getting hard to maintain. So far, most of the solutions I seen to manage templates ended up needing them to be js files. That's also a headache, I prefer them to be html files for editing purposes.
我查看了 requirejs 并不确定我是否需要它，因为它有点围绕一种更模块化的方法，我现在不能说我正在使用(尽管我很快会使用).
I took a look at requirejs and not sure if I need that since it kinda revolves around a more modular approach that I can't say I'm using at the moment (although I will soon).
管理模板并根据需要加载/缓存它们的最佳方法是什么?
What will be the best way to manage templates and load/cache them as needed?
推荐答案
就我个人而言，我们公司需要一个强大的解决方案，所以我们选择了:
Personally we needed a robust solution at my company, so we went with:
- Require.js - 用于加载模块
- Handlebars - 用于比 Underscore 提供的更强大的模板
- HBS - 来自 Alex Sexton 的一个优秀的 require 插件，它处理通过 Require 引入编译模板
通过这种设置，我可以将所有模板保存在自己的文件中，然后使用它们，我有这样的文件:
With this setup I can keep all of my templates in their own file, and then to use them I have files like this:
define(['template!path/to/someTemplate'], function(someTemplate) {
var MyNewView = BaseView.extend({template: someTemplate});
$('body').append(new MyNewView().render().el);
}
(正如您可能猜到的，我们有一个名为 BaseView 的基本 Backbone 视图，它使用视图的模板属性来呈现视图).
(and as you might guess we have a base Backbone view called BaseView which uses the view's template property to render the view).
现在，综上所述，如果您不需要如此强大的设置，那么 Require 可能不适合您.在这种情况下，我会执行以下操作:
Now, all that being said, if you don't need such a robust setup then Require may not be for you. In that case I would do the following:
将所有模板放入一个或多个 HTML 文件中；将它们包装在脚本标签中，如下所示:
Put all of your templates in to one or more HTML files; wrap them in script tags, like so:
<script id="dummyTemplate" type='text/template'>
<span>I'm a template!</span>
</script>
在您的服务器端编写一些代码，将这些 HTML 文件包含在您发送给客户端的主 HTML 文件中
Write some code on your server-side to include those HTML files in the main HTML file you send to the client
编写一个函数，它接受模板 ID，获取该元素的文本，将其编译为模板，然后返回该模板(如果需要，可以缓存已编译的模板……当然，使用下划线我认为您甚至不需要编译模板，因此您可以跳过所有这些).
Write a function which takes a template ID, gets the text of that element, compiles it in to a template, and returns that template (maybe cache the compiled templates if you want ... of course, with Underscore templates I don't think you even need compiling, so you can skip all that).
使用您的函数访问您的模板:$("#something").html(templateFunc('dummyTemplate').template())
Use your function to access your templates: $("#something").html(templateFunc('dummyTemplate').template())
这将允许您将模板存储在 html 文件中(用于语法着色)，但仍然可以在 JS 中方便地访问它们.您还可以根据需要将模板划分为任意数量的文件，只要您可以编写包含逻辑将它们引入即可.
This will allow you to store your templates in html files (for syntax coloring), but still access them conveniently in JS. You can also divide your templates between as many files as you want, as long as you can write include logic to bring them in.
如果您确实选择了 Require，请务必查看 HBS 插件.如果你还没有看过 Handlebars 模板，你可能想要；它们比 Underscore 强大得多(但就像任何好的模板系统一样，不允许有太多逻辑).
If you do opt for Require though, definitely check out the HBS plugin. And if you haven't looked at Handlebars templates yet, you might want to; they're far more powerful than Underscore ones (but like any good templating system, don't allow for too much logic).
这篇关于主干:管理模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
