Jak korzystać z prekompilowanych szablonów w Handlebars z RequireJS?

Question

Chciałbym wstępnie skompilować szablony Handlebars, ale nie jestem pewien, jak to działa w trybie programowania.

Czy często stosuje się proces w tle, np. Guard, aby stale monitorować zmiany w plikach szablonu kierownicy?

Używam RequireJS do wciągania szablonów; np:

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)); 

    // ... 

}); 

Rozumiem raz szablony są skompilowane, można by to zrobić:

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

    // ... 

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

    // ... 

}); 

Uwaga Poniższa o w drugim fragmencie kodu: Moduł

1. W RequireJS nie dłużej ciągnie szablon.
2. Funkcja Handlebars.compile() nie jest już używana.

Zwykle miałabym mieć Ochronę, aby moje szablony były kompilowane za każdym razem, gdy modyfikacje na poziomie systemu plików mają miejsce w plikach szablonów?

Zasadniczo moje pytanie brzmi:, czy deweloperzy zamierzają to zrobić?

Używam również Railsów, więc może jest jakaś czarna magia, jak sass-rails.

Answer 1

Czy obejrzałeś wtyczkę Require.js Handlebars (https://github.com/SlexAxton/require-handlebars-plugin) czy requirejs-hbs epeli (https://github.com/epeli/requirejs-hbs)?

Answer 2

Ten artcle o Require.js i kierownicy mogą pomóc http://seanamarasinghe.com/developer/requirejs-handlebars/

Answer 3

Ponieważ tym pytaniem, odkryłem, że innym sposobem osiągnięcia tego celu może być poprzez Grunt Watch. Jednak jeszcze lepszym sposobem jest użycie Grunt i Browserify, pomijanie RequireJS łącznie. Wtedy będziesz używał pakietów NPM ... i większość bibliotek dostępnych z RequireJS wydaje się być również dostępna jako pakiety NPM (zadziwiająco nawet biblioteki oparte na DOM, takie jak jQuery, Backbone, Angular). Następnie użyć synchroniczny require() wywołuje wymagać rzeczy:

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(); 
}); 

Jest to o wiele ładniejszy, i to jest możliwe, ponieważ aplikacja jest w pełni zbudowany za każdym razem działa. Połącz to z zegarem Grunt, aby Twoja aplikacja odbudowywała się za każdym razem, gdy nastąpiła zmiana i działałaś.

A proces budowy nawet zajmuje się budowaniem szablonów kierownicy. Aby dołączyć szablon, wystarczy wykonać require('./templates/my-template.hbs');, a proces kompilacji dla trybu "przeglądaj" bitwy znajdzie to wywołanie require(), skompiluje szablon i doda skompilowany szablon do pliku js aplikacji budującej.

Znacznie ładniejsza niż RequireJS!