Question

我正在使用Handlebars.js，目前我的所有模板都存在于脚本标记内，这些标记位于.html文件中，其中包含许多其他模板，也包含在脚本标记内。

<script type="text/template" id="template-1">
  <div>{{variable}}</div>
</script>

<script type="text/template" id="template-2">
  <div>{{variable}}</div>
</script>

<script type="text/template" id="template-3">
  <div>{{variable}}</div>
</script>

...

然后我将此文件作为部分包含在服务器端。

这有以下缺点：

将一堆模板塞进HTML文件中。
找到给定的模板很乏味。

我正在寻找一种更好的方式来整理我的模板。我希望每个模板都存在于自己的文件中。例如：

/public/views/my_controller/my_action/some_template.html
/public/views/my_controller/my_action/some_other_template.html
/public/views/my_controller/my_other_action/another_template.html
/public/views/my_controller/my_other_action/yet_another_template.html
/public/views/shared/my_shared_template.html

然后在我的视图的顶部，在后端代码中，我可以在页面加载时包含这些模板，如下所示：

SomeTemplateLibrary.require(
    "/public/views/my_controller/my_action/*",
    "/public/views/shared/my_shared_template.html"
)

这将包括/ public / views / my_controller / my_action /中的所有模板，还包括/public/views/shared/my_shared_template.html。

我的问题：是否有提供此功能或类似功能的库？或者，是否有人有任何其他组织建议？

Answer 1

RequireJS非常适合AMD风格依赖管理。您实际上可以使用requireJS的“text”插件将模板文件加载到UI组件中。将模板附加到DOM后，您可以使用任何MVVM，MVC库进行绑定，或者只使用jQuery事件作为逻辑。

我是BoilerplateJS的作者。 BoilerplateJS参考架构使用requireJS进行依赖关系管理。它还提供了一个参考实现，以显示如何创建自包含的UI组件。自包含在处理自己的视图模板，代码隐藏，css，本地化文件等的意义上。

Files in a BoilerplateJS UI Component

在“UI组件”下的boilerplateJS主页上提供了更多信息。

http://boilerplatejs.org/

Answer 2

我最终使用了RequireJS，这让我这么做了。请参阅http://aaronhardy.com/javascript/javascript-architecture-requirejs-dependency-management/。

Answer 3

我使用模板加载器，在第一次需要时使用ajax加载模板，并在本地缓存以供将来请求使用。我还使用调试变量来确保在开发时不缓存模板：

var template_loader = {
    templates_cache : {},
    load_template : function load_template (params, callback) {
        var template;
        if (this.templates_cache[params.url]){
            callback(this.templates_cache[params.url]);
        }
        else{
            if (debug){
                params.url = params.url + '?t=' + new Date().getTime(), //add timestamp for dev (avoid caching)
                console.log('avoid caching url in template loader...');
            }
            $.ajax({
                url: params.url,
                success: function(data) {
                    template  = Handlebars.compile(data);
                    if (params.cache){
                        this.templates_cache[params.url] =  template;
                    }
                    callback(template);
                }
            });
        }
    }
};

模板加载如下：

template_loader.load_template({url: '/templates/mytemplate.handlebars'}, function (template){
  var template_data = {}; //get your data
  $('#holder').html(template(template_data)); //render
})

Answer 4

这是我为这个目的编写的这个方便的小jquery插件。

https://github.com/cultofmetatron/handlebar-helper

将客户端模板组织到单个文件中的方法？

4 个答案: