Vorkompilierte Lenkervorlagen im Backbone mit Requirejs?

Question

Ich habe mit einer backbone.js app mit require.js und einem Lenker Vorlagen (Ich habe die AMD-Modul-Zeug zum Lenker hinzugefügt) und lesen Sie gerade, dass Vor-kompilieren der Vorlagen kann es ein wenig beschleunigen .

Ich fragte mich, wie würde ich gehen über die vorkompilierten Vorlagen mit Requirejs gehen. Ich habe ein paar wenige Vorlagen zu kompilieren (mehr als 15), also bin ich mir nicht sicher, ob sie alle in der gleichen Ausgabedatei sein sollten oder ihre eigenen einmal kompiliert haben. Außerdem scheinen die kompilierten Vorlagen denselben Handlebars Namespace zu verwenden, den das Renderer-Skript verwendet. Daher bin ich mir nicht sicher, wie ich vorgehen würde, wenn ich die Vorlagen in meinen Dateien benötige.

Jeder Rat wäre toll!

Answer 1

Werfen Sie einen Blick auf die Requirejs-Handlebarsjs Plugin: https://github.com/SlexAxton/require-handlebars-plugin

Answer 2

Ein einfacher Ansatz ist es, ein RequireJS Plugin auf dem vorhandenen Text basiert erstellen! Plugin. Dies lädt und kompiliert die Vorlage. RequireJs werden die kompilierte Vorlage zwischenspeichern und wiederverwenden.

der Plugin-Code:

// hbtemplate.js plugin for requirejs/text.js 
// it loads and compiles Handlebars templates 
define(['handlebars'], 
function (Handlebars) { 

    var loadResource = function (resourceName, parentRequire, callback, config) { 
     parentRequire([("text!" + resourceName)], 
      function (templateContent) { 
       var template = Handlebars.compile(templateContent); 
       callback(template); 
      } 
     ); 
    }; 

    return { 
     load: loadResource 
    }; 

}); 

Konfiguration in main.js:

require.config({ 
    paths: { 
     handlebars: 'libs/handlebars/handlebars', 
     hb: 'libs/require/hbtemplate', 
    } 
}); 

Verwendung in einer backbone.marionette Ansicht:

define(['backbone', 'marionette', 
     'hb!templates/bronnen/bronnen.filter.html', 
     'hb!templates/bronnen/bronnen.layout.html'], 
     function (Backbone, Marionette, FilterTemplate, LayoutTemplate) { 
     ... 

Im Fall, dass Sie die große Backbone .Marionette Rahmen können Sie den Standard-Renderer überschreiben, so dass es t umgehen wird Er baute Vorlagenlader (zum Laden/Kompilieren/Caching):

Marionette.Renderer = { 
    render: function (template, data) { 
     return template(data); 
    } 
};