Modelli manubri precompilati in Backbone con Requirejs?

Question

Ho lavorato con un'applicazione backbone.js usando require.js e un modello di manubri (ho aggiunto il modulo AMD al manubrio) e ho letto che la pre-compilazione dei template può velocizzarla un po ' .

Mi chiedevo come avrei potuto includere i modelli precompilati con requirejs. Ho un discreto numero di modelli da compilare (verso l'alto di 15), quindi non sono sicuro se tutti dovrebbero essere nello stesso file di output o avere i propri una volta compilati. Inoltre, da quello che sembra, i modelli compilati condividono lo stesso spazio dei nomi Handlebars utilizzato dallo script di rendering, quindi non sono sicuro di come andrei a farlo quando richiedo i modelli nei miei file.

Qualsiasi consiglio sarebbe fantastico!

Answer 1

Dai un'occhiata alla plugin Requirejs-Handlebarsjs: https://github.com/SlexAxton/require-handlebars-plugin

Answer 2

Un approccio semplice è quello di creare un plugin RequireJS sulla base del testo già esistente! collegare. Questo caricherà e compilerà il modello. RequireJs memorizzerà nella cache e riutilizzerà il modello compilato.

il codice del plugin:

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

}); 

configurazione main.js:

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

utilizzo in una vista backbone.marionette:

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

Nel caso si utilizzi la grande spina dorsale .Marionette framework è possibile sovrascrivere il renderer di default in modo che aggirerà t ha incorporato il caricatore di modelli (per caricamento/compilazione/memorizzazione nella cache):

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