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()}));
});

更好的解决方案是预先编译模板，这样可以加快加载时间。有关预编译的更多信息，请参见here。

Answer 3

来自Jeremy Belolo的编辑解决方案，用于在目录中处理更多模板，如果我不想在templates目录中拥有所有模板。

Handlebars.getTemplate = function(name, dir) {

    if (dir === undefined) //dir is optional
        dir = "";

    if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
        $.ajax({
            url : 'templates/' + dir+'/' + name,    //Path, dir is optional
            success : function(data) {

                if (Handlebars.templates === undefined) {
                    Handlebars.templates = {};
                }

                if (Handlebars.templates[dir] === undefined) {
                    Handlebars.templates[dir] = {};
                }

                if (dir === undefined)
                    Handlebars.templates[name] = Handlebars.compile(data);
                else
                    Handlebars.templates[dir][name] = Handlebars.compile(data);
            },
            async : false
        });
    }

    if (dir === undefined)
        return Handlebars.templates[name];
    else
        return Handlebars.templates[dir][name];
};

Answer 4

使用async: false;远非完美的解决方案。使用工具箱中的jQuery，只需使用$ .Deferred。

我提出了这个解决方案：

;(function ($, Handlebars) {
    'use strict';

    var namespace   = window,
        pluginName  = 'TemplateEngine';

    var TemplateEngine = function TemplateEngine(options) {
        if(!(this instanceof TemplateEngine)) {
            return new TemplateEngine(options);
        }

        this.settings = $.extend({}, TemplateEngine.Defaults, options);
        this._storage = {};

        return this;
    };
    TemplateEngine.Defaults = {
        templateDir: './tpl/',
        templateExt: '.tpl'
    };

    TemplateEngine.prototype = {
        constructor: TemplateEngine,

        load: function(name, $deferred) {
            var self = this;
            $deferred = $deferred || $.Deferred();

            if(self.isCached(name)) {
                $deferred.resolve(self._storage[name]);
            } else {
                $.ajax(self.urlFor(name)).done(function(raw) {
                    self.store(name, raw);
                    self.load(name, $deferred);
                });
            }

            return $deferred.promise();
        },
        fetch: function(name) {
            var self = this;

            $.ajax(self.urlFor(name)).done(function(raw) {
                self.store(name, raw);
            });
        },
        isCached: function(name) {
            return !!this._storage[name];
        },
        store: function(name, raw) {
            this._storage[name] = Handlebars.compile(raw);
        },
        urlFor: function(name) {
            return (this.settings.templateDir + name + this.settings.templateExt);
        }
    };


    window[pluginName] = TemplateEngine;

})(jQuery, Handlebars);

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

4 个答案: