Come utilizzare i modelli precompilati in Handlebars con RequireJS?

Question

Mi piacerebbe precompilare i miei modelli di Handlebars, ma non sono sicuro di come funzioni in modalità sviluppo.

È prassi comune eseguire alcuni processi in background come Guard per monitorare costantemente le modifiche ai file modello di Handlebars?

Sto usando RequireJS per inserire i modelli; ad esempio:

define(['jquery', 'handlebars', 'text!templates/my_template'], function($, Handlebars, myTemplate) { 

    // ... 

    var data = {"some": "data", "some_more": "data"}; 
    var templateFn = Handlebars.compile(myTemplate); 
    $('#target').append(templateFn(data)); 

    // ... 

}); 

così ho capito una volta i modelli vengono precompilati, si potrebbe fare questo:

define(['jquery', 'handlebars'], function($, Handlebars) { 

    // ... 

    var data = {"some": "data", "some_more": "data"}; 
    var template = Handlebars.templates['my_template']; 
    $('#target').append(template(data)); 

    // ... 

}); 

tenere presente quanto segue il nel secondo frammento di codice: modulo

1. I RequireJS no tira più a lungo nel modello.
2. Handlebars.compile() non è più utilizzato.

In genere, dovrei avere Guard in esecuzione per mantenere i miei modelli compilati ogni volta che le modifiche a livello di sistema a livello di file si verificano nei file di modello?

Fondamentalmente la mia domanda è, è l'intenzione per gli sviluppatori di fare questo?

if (development) { 
    compile templates 
} 
else { 
    use precompiled templates 
} 

Sto anche utilizzando Rails, quindi forse c'è qualche magia nera come sass-rail.

Answer 1

Avete dare un'occhiata a Require.js Manubrio Plugin (https://github.com/SlexAxton/require-handlebars-plugin) o requirejs-hbs di Epeli (https://github.com/epeli/requirejs-hbs)?

Answer 2

Questo artcle su Require.js e il manubrio potrebbe aiutare http://seanamarasinghe.com/developer/requirejs-handlebars/

Answer 3

Da questa domanda, ho trovato che un altro modo per raggiungere questo obiettivo potrebbe essere via Grunt Watch. Tuttavia, un modo ancora migliore è usare Grunt e Browserify, saltando del tutto RequireJS. Quindi utilizzerai pacchetti NPM ... e la maggior parte delle librerie disponibili con RequireJS sembrano essere disponibili anche come pacchetti NPM (incredibilmente anche librerie basate su DOM, come jQuery, Backbone, Angular). Quindi si utilizza sincrona richiedono() chiama per richiedere le cose:

var $ = require('jquery'), 
    Backbone = require('backbone'), 
    AppRouter = require('./app/routers/app'); 

// Compile LESS and attach resulting CSS to the HEAD. 
require('./less/app.less'); 

$(function() { 
    new AppRouter(); 
    Backbone.history.start(); 
}); 

Questo è molto più bello, ed è possibile perché l'applicazione è completamente costruito ogni volta che viene eseguito. Combina questo con Grunt Watch in modo tale che la tua app si ricostruisca ogni volta che c'è un cambiamento, e tu sei in affari.

E il processo di costruzione si occupa anche della creazione di modelli di manubri. Per includere un modello, devi semplicemente eseguire require('./templates/my-template.hbs'); e il processo di compilazione per grunt-browserify troverà questa chiamata require(), compilerà il modello e includerà il modello compilato nel file js dell'app build.

Molto più bello di RequireJS!