Wie definieren Handlebar.js Vorlagen in eine externe Datei

Ich bin derzeit auf der Definition meiner LENKER-Vorlagen, die innerhalb der gleichen HTML-Datei in der Sie verwendet werden.

Ist es möglich zu definieren, Sie als externe templates, die aufgerufen werden können, wenn die Seite geladen ist?

InformationsquelleAutor Naveen | 2014-04-11
  1. 18

    Für diejenigen, die bekommen hier über Google suchen wie ich es Tat, fand ich endlich die perfekte Antwort in diesem post, check it out :

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

    Grundsätzlich müssen Sie implementieren eine Methode 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];
};

    und dann rufen Sie Ihre Vorlage mit :

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

    So, wenn Sie vorkompilierte die Vorlagen (ideal für die Produktion verwenden), wird es direkt zu finden, sonst holt sich die Vorlage aus und kompilieren Sie es in den browser (das ist, wie Sie arbeiten in der Entwicklung).

    InformationsquelleAutor Jeremy Belolo
  2. 2

    Können Sie AJX, um diese zu laden.

    Hier ist eine Beispiel-Funktion akzeptiert eine URL zu einer LENKER-Vorlage, und eine callback-Funktion. Die Funktion lädt die Vorlage und ruft die callback-Funktion mit den gesammelten LENKER-Vorlage als parameter:

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

    Nehmen wir beispielsweise an, Sie haben eine LENKER-Vorlage definiert in einer Datei namens /templates/MyTemplate.html wie:

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

    Können Sie dann laden Sie die Datei, kompilieren und Rendern der UI, wie diese:

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

    Eine noch bessere Lösung wäre es, vor-kompilieren der templates, die beschleunigen würde die Zeit, die Sie ergreifen, um zu laden. Mehr info auf Vorkompilierung finden hier.

    InformationsquelleAutor Gwyn Howell
  3. 0

    Editiert Lösung von Jeremy Belolo für die Arbeit mehr Vorlagen in den Verzeichnissen, wenn ich nicht wollen alle Vorlagen in templates Verzeichnis.

    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];
};
    InformationsquelleAutor t0m
  4. 0

    Mit async: false; ist weit davon entfernt, die perfekte Lösung. Mit jQuery in Ihren Werkzeugkasten, machen nur die Verwendung von $.Latente.

    Kam ich auf diese Lösung:

    ;(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);
    InformationsquelleAutor codeFareith
Schreibe einen Kommentar