Предварительно скомпилированные шаблоны ручек в базовой линии с требованием?

Question

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

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

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

Answer 1

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

Answer 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 framework вы можете переопределить рендеринг по умолчанию, чтобы он обходил t он построил загрузчик шаблонов (для загрузки/компиляции/кеширования):

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