如何在外部文件中定义Handlebar.js模板

Question

我目前正在使用它们的同一HTML文件中定义我的Handlebars模板.

是否可以将它们定义为外部模板,可以在加载页面时调用它们？

Answer 1

对于那些像我一样通过谷歌搜索到达这里的人,我终于在这篇文章中找到了完美答案,请查看:

http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro

基本上你需要实现一个方法getTemplate:

Handlebars.getTemplate = function(name) {
    if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
        $.ajax({
            url : 'templatesfolder/' + name + '.handlebars',
            success : function(data) {
                if (Handlebars.templates === undefined) {
                    Handlebars.templates = {};
                }
                Handlebars.templates[name] = Handlebars.compile(data);
            },
            async : false
        });
    }
    return Handlebars.templates[name];
};

然后用它调用你的模板:

var compiledTemplate = Handlebars.getTemplate('hello');
var html = compiledTemplate({ name : 'World' });

这样,如果您预编译模板(非常适合生产使用),它将直接找到它,否则它将获取模板并在浏览器中编译它(这就是您在开发中的工作方式).

Answer 2

您可以使用 AJX 来加载它们。

下面是一个示例函数，它接受 Handlebars 模板的 URL 和回调函数。该函数加载模板，并以编译后的 Handlebars 模板作为参数调用回调函数：

function loadHandlebarsTemplate(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var raw = xhr.responseText;
            var compiled = Handlebars.compile(raw);
            callback(compiled);
        }
    };
    xhr.send();     
}

例如，假设您在名为 /templates/MyTemplate.html 的文件中定义了 Handlebars 模板，例如：

<p>The current date is {{date}}</p>

然后，您可以加载该文件，编译它并将其渲染到 UI，如下所示：

var url = '/templates/MyTemplate.html';
loadHandlebarsTemplate(url, function(template) {
    $('#container').html(template({date: new Date()}));
});

更好的解决方案是预编译模板，这将加快加载时间。有关预编译的更多信息可以在这里找到。