Emberjs Handlebars precompiling

Ответ 1

Вы можете установить вывод с предварительно скомпилированными дескрипторами в свойство шаблона (not templateName) на вашем экране ember. Это то же, что и у подножия под капотом

MyApp.MyView = Ember.View.extend({
  templateName: "myViewWhatever",
  template: Ember.Handlebars.compile('<p>{{blah}}</p>'),
})

Ответ 2

Чтобы уточнить, пример Томаса как написанный все еще делает компиляцию шаблона во время выполнения. Я думаю, его точка зрения заключалась в том, что после того, как вы загрузили свои предварительно скомпилированные шаблоны Ember-Handlebars вы можете сделать это:

MyApp.MyView = Ember.View.extend({
  template: Ember.TEMPLATES.mytemplate,
})

Проблема с использованием встроенного прекомпилятора Handlebars заключается в том, что реализация Ember Handlebars добавляет некоторые функции поверх того, что предоставляет Handlebars, поэтому вы захотите установить пакет ember-precompile, который обеспечивает в основном тот же интерфейс, что и утилита командной строки handlebars, но использует реализацию Ember Handlebars.

Это позволит избежать изменения всех ваших templateName до template и необходимости добавлять в Ember.TEMPLATES... в каждом представлении, поскольку он автоматически обновляет встроенный кеш шаблонов Ember.

Итак, если вы уже загрузили свой предварительно выполненный templates.js файл в качестве вывода из ember-precompile templates/*.handlebars -f templates/templates.js, здесь приведен более полный пример фрагмента рабочего порядка импорта/инициализации:

<script src="/lib/handlebars-1.0.0.beta.6.js"></script>
<script src="/lib/ember-1.0.pre.js"></script>
<script src="/lib/ember-data-latest.js"></script>
<script>
  var App = Ember.Application.create();
</script>
<script src="/templates/templates.js"></script>
<script src="/js/models.js"></script>
<script src="/js/views.js"></script>
<script src="/js/controllers.js"></script>
<script src="/js/router.js"></script>
<script>
  App.initialize();
</script>

Ответ 3

Вы также можете использовать Grunt.js и компилятор шаблонов handlebars. Я использовал плагин "grunt-ember-templates", и он работает хорошо.

http://gruntjs.com/

https://npmjs.org/package/grunt-ember-templates

Ответ 4

Вот суть, показывающая, как предварительно скомпилировать шаблоны дескрипторов и добавить результат к объекту Ember.TEMPLATES, с которым Эмбер советует разрешать именованные шаблоны.

https://gist.github.com/2013669

Ответ 5

Вы можете предварительно скомпилировать в клиентском браузере, как заявил Томас Бартельмасс.

Вы также можете предварительно скомпилировать дескрипторы с помощью nodejs (взятые из моего собственного Jakefile):

var Handlebars = require('handlebars');
precompile = (function () {
    //Lovingly extracted from Ember sources.
    var objectCreate = Object.create || function (parent) {
            function F() {}
            F.prototype = parent;
            return new F();
        },
        Compiler = function () {},
        JavaScriptCompiler = function () {};

    Compiler.prototype = objectCreate(Handlebars.Compiler.prototype);
    Compiler.prototype.compiler = Compiler;
    JavaScriptCompiler.prototype = objectCreate(Handlebars.JavaScriptCompiler.prototype);
    JavaScriptCompiler.prototype.compiler = JavaScriptCompiler;
    JavaScriptCompiler.prototype.namespace = "Ember.Handlebars";
    JavaScriptCompiler.prototype.initializeBuffer = function () {
        return "''";
    };
    JavaScriptCompiler.prototype.appendToBuffer = function (string) {
        return "data.buffer.push(" + string + ");";
    };
    Compiler.prototype.mustache = function (mustache) {
        if (mustache.params.length || mustache.hash) {
            return Handlebars.Compiler.prototype.mustache.call(this, mustache);
        } else {
            var id = new Handlebars.AST.IdNode(['_triageMustache']);
            if (!mustache.escaped) {
                mustache.hash = mustache.hash || new Handlebars.AST.HashNode([]);
                mustache.hash.pairs.push(["unescaped", new Handlebars.AST.StringNode("true")]);
            }
            mustache = new Handlebars.AST.MustacheNode([id].concat([mustache.id]), mustache.hash, !mustache.escaped);
            return Handlebars.Compiler.prototype.mustache.call(this, mustache);
        }
    };
    return function precompile(string) {
        var ast = Handlebars.parse(string);
        var options = {
            knownHelpers : {
                action : true,
                unbound : true,
                bindAttr : true,
                template : true,
                view : true,
                _triageMustache : true
            },
            data : true,
            stringParams : true
        };

        var environment = new Compiler().compile(ast, options);
        return new JavaScriptCompiler().compile(environment, options, undefined, true);
    };
}());

strPrecompiledTemplate = item.handlebarsTemplateFolders.map(function (dir) {
    console.info("\tProcessing " + dir);
    return readdirRecursiveSync(dir).map(function (file) {
        console.info("\t\t" + file);
        var content = fs.readFileSync(file, 'utf-8');
        content = Handlebars.precompile(content);
        file = file.replace(/\.[^\.]+$/, '').replace(/^src\//g, '').substr(dir.length).replace(/^\/+/, '');
        // Pay attention: The wrap in Ember.Handlebars.template() is important!
        return "Ember.TEMPLATES['"+file+"'] = Ember.Handlebars.template("+content+");";
    }).join("\r\n");
}).join("\r\n");

Ответ 6

Я использую Gulp для сборки, а прекомпиляция шаблонов выглядит так:

var handlebars = require('gulp-ember-handlebars');
var concat = require('gulp-concat');

var SRC = {
    TEMPLATES: ['app/templates/**/*.{hbs,html}']
};

gulp.task('templates', function() {
  return gulp.src(SRC.TEMPLATES)
    .pipe(handlebars({outputType: 'browser'}))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest(DEST.SCRIPTS));
});

Затем я использую библиотеку времени выполнения Handlebars, а не полную версию.

Ember-Handlebars: https://www.npmjs.org/package/gulp-ember-handlebars