Предварительно скомпилированные шаблоны Handlebars в Backbone с Requirejs?

Я общался с приложением backbone.js, используя require.js и шаблоны дескрипторов (я добавил материал модуля AMD в дескрипторы) и просто прочитал, что предварительная компиляция шаблонов может ускорить его бит.

Мне было интересно, как я буду включать в себя предварительно скомпилированные шаблоны с requirejs. У меня есть несколько шаблонов для компиляции (более 15), поэтому я не уверен, что все они должны быть в одном и том же выходном файле или иметь свой собственный после компиляции. Кроме того, из того, что кажется, скомпилированные шаблоны используют одно и то же пространство имен Handlebars, которое использует средство визуализации script, поэтому я не уверен, как я буду это делать, когда вам потребуются шаблоны в моих файлах.

Любые советы были бы замечательными!

Ответ 1

Посмотрите на плагин Requirejs-Handlebarsjs: https://github.com/SlexAxton/require-handlebars-plugin

Ответ 2

Простым подходом является создание плагина RequireJS на основе существующего текста! плагин. Это позволит загрузить и скомпилировать шаблон. RequireJs будет кэшировать и повторно использовать скомпилированный шаблон.

код плагина:

// 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
    };

});

в main.js:

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

использование в представлении backbone.marionette:

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

Если вы используете отличную основу Backbone.Marionette, вы можете переопределить средство визуализации по умолчанию, чтобы он обошел встроенный загрузчик шаблонов (для загрузки/компиляции/кэширования):

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