Angular外部模板与Handlebars外部模板

时间:2013-12-26 06:25:13

标签: javascript angularjs jquery templates handlebars.js

这是我在Handlebarsjs中加载和编译模板的方法,

define([
    'jquery',
    'handlebars'
],
function ($, Handlebars) {

    // @reference: http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro
    Handlebars.getTemplate = function(name) {
        if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
            $.ajax({
                url : 'js/template/' + name + '.handlebars',
                success : function(data) {
                    if (Handlebars.templates === undefined) {
                        Handlebars.templates = {};
                    }
                    Handlebars.templates[name] = Handlebars.compile(data);
                },
                dataType: "text",
                async : false
            });
        }
        return Handlebars.templates[name];
    };

    // Precompile your templates and add/paste them below here. 

});

我可以使用下面的这一行检索模板,

this.$el.html(Handlebars.getTemplate('list')({contacts: response}));

所以我不必使用ajax一遍又一遍地调用相同的模板。我可以从Handlebars的存储器中获取它。

Angularjs可以吗?我一直在寻找在Angualrjs中做这个的教程,但找不到任何东西。任何想法都是一个良好的开端?

1 个答案:

答案 0 :(得分:1)

Angular.js会在请求模板时缓存模板(因此请求只发生一次),但您可以使用$templateCache预填充该缓存。