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

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

16 голосов
/ 27 марта 2012

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

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

Anyсовет был бы офигенным!

Ответы [ 2 ]

17 голосов
/ 16 июня 2012

Простой подход - создать плагин 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);
    }
};
14 голосов
/ 27 марта 2012

Взгляните на плагин Requirejs-Handlebarsjs: https://github.com/SlexAxton/require-handlebars-plugin

...