Backbone中带有Requirejs的预编译Handlebars模板?

Tom*_*oli 16 requirejs backbone.js handlebars.js

我一直在使用一个使用require.js和一个把手模板的backbone.js应用程序(我已经将AMD模块的东西添加到把手),并且只是阅读预先编译模板可以加快它的速度.

我想知道如何将预编译的模板包含在requirejs中.我有很多可以编译的模板(超过15个),所以我不确定它们是否应该都在同一个输出文件中,或者一旦编译完成它们.此外,从看起来,编译的模板共享Handlebars渲染器脚本使用的相同命名空间,所以我不确定在我的文件中需要模板时我会怎么做.

任何建议都会很棒!

Bor*_*kom 17

一种简单的方法是根据现有文本创建一个RequireJS插件!插入.这将加载并编译模板.RequireJs将缓存并重用已编译的模板.

插件代码:

// hbtemplate.js plugin for requirejs / text.js
// it loads and compiles Handlebars templates
define(['handlebars'],
function (Handlebars) {

    var loadResource = function (resourceName, parentRequire, callback, config) {
        parentRequire([("text!" + resourceName)],
            function (templateContent) {
                var template = Handlebars.compile(templateContent);
                callback(template);
            }
        );
    };

    return {
        load: loadResource
    };

});
Run Code Online (Sandbox Code Playgroud)

main.js中的配置:

require.config({
    paths: {
        handlebars: 'libs/handlebars/handlebars',
        hb: 'libs/require/hbtemplate',
    }
});
Run Code Online (Sandbox Code Playgroud)

在backbone.marionette视图中的用法:

define(['backbone', 'marionette',
        'hb!templates/bronnen/bronnen.filter.html',
        'hb!templates/bronnen/bronnen.layout.html'],
        function (Backbone, Marionette, FilterTemplate, LayoutTemplate) {
        ...
Run Code Online (Sandbox Code Playgroud)

如果你使用伟大的Backbone.Marionette框架,你可以覆盖默认的渲染器,以便它绕过内置的模板加载器(用于加载/编译/缓存):

Marionette.Renderer = {
    render: function (template, data) {
        return template(data);
    }
};
Run Code Online (Sandbox Code Playgroud)

  • 我最终使用这种技术取得了很好的成功,但我添加了一个有助于提高性能的方法.我们希望尽可能使用预编译的模板,以便Grunt.js将我们所有的模板编译成一个名为JST []的关联数组,每个模板都可以通过文件的名称获得.在上面的代码中添加一些内容很容易,它会检查JST的存在,然后检查该数组中的特定模板.如果它在那里,返回预编译的模板.否则,如图所示执行加载并编译它.然后,您可以使用许多模板进行开发,您可以随意更改并在运行时使用预编译. (4认同)
  • @JohnMunsch不要以为您有关于上述解决方案的任何代码?这听起来就像我一直在努力的那样,但是目前我遇到很多问题似乎无法让它发挥作用.你愿意分享吗?:) (2认同)
  • @JohnMunsch没关系!在我等待的时候,我推出了自己的版本 - 如果你愿意,可以随意评论或使用.https://gist.github.com/engram-design/5539338 (2认同)