Question

我的预编译模板文件是templates.js - 如何使用RequireJS加载此文件？

requirejs.config({
    paths: {
        jquery: '../bower_components/jquery/jquery'
        , underscore: '../bower_components/underscore/underscore'
        , handlebars: '../bower_components/handlebars/handlebars'
        , moment: '../bower_components/momentjs/moment'
        , spin: '../bower_components/spinjs/spin'
        , templates: 'templates'
    },
    shim: {
        handlebars: {
            exports: 'Handlebars'
        },
        templates: {
            deps: ['handlebars']
        }
    }
});

requirejs(["jquery", "underscore", "handlebars", "templates", "moment", "spin", "test"], function($, _, Handlebars, Templates, moment, Spinner, test) {
    test.init();
});

Answer 1

您应该使用AMD支持编译模板。（我通常是在this Grunt插件的帮助下完成的。）

   requirejs.config({
    paths: {
        jquery: '../bower_components/jquery/jquery'
        , underscore: '../bower_components/underscore/underscore'
        , handlebars: '../bower_components/handlebars/handlebars'
        , moment: '../bower_components/momentjs/moment'
        , spin: '../bower_components/spinjs/spin'
        , templates: 'templates'
    },
    shim: {
        handlebars: {
            exports: 'Handlebars'
        }
    }
});

requirejs(["jquery", "underscore", "templates", "moment", "spin", "test"]
    , function($, _, Templates, moment, Spinner, test) {
        test.init();
});

现在Templates是一个对象，其键是模板的名称，其值是Handlebars模板功能。

用法示例：

var template = Templates['templates/posts.hbs'];
document.body.innerHTML = template({
    title: 'All posts',
    posts: [
        { title: 'First post', '13/11/2013'},
        { title: 'Second post', '15/11/2013'}
    ]    
});

如何使用Require.js加载预编译的Handlebar模板？

1 个答案: