Backbone:管理模板

4 javascript backbone.js underscore.js

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

我看了一下requirejs并且不确定我是否需要它,因为它有点围绕一种更模块化的方法,我不能说我现在正在使用(尽管我很快就会).

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

mac*_*ost 5

我个人在公司需要一个强大的解决方案,所以我们选择:

  • Require.js - 用于模块加载
  • 把手 - 比Underscore提供更强大的模板
  • HBS - 来自Alex Sexton的优秀需求插件,用于处理在via Require中编译模板的过程

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

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

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

现在,尽管如此,如果你不需要这么强大的设置,那么Require可能不适合你.在那种情况下,我会做以下事情:

  1. 将所有模板放入一个或多个HTML文件中; 将它们包装在脚本标记中,如下所示:

    <script id="dummyTemplate" type='text/template'>
    <span>I'm a template!</span>
    </script>
    
    Run Code Online (Sandbox Code Playgroud)
  2. 在服务器端编写一些代码,将这些HTML文件包含在发送给客户端的主HTML文件中

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

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

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

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