Question

我的Emberjs应用程序运行缓慢所以我想预编译我的模板以简化运行时。然而，我迷失了如何继续前进。我读了http://handlebarsjs.com/precompilation.html和Emberjs的介绍但是没有，我所能做的就是按照网站上的指示创建一个模板文件，我无法弄清楚Emberjs中这个模板文件的内容和方法。

如何在Emberjs中预编译模板？如何在Emberjs中使用模板文件？

Answer 1

为了澄清，Thomas的编写示例仍然是在运行时进行模板编译。不过，我认为他的观点是，在您加载precompiled Ember-Handlebars templates后，您可以执行此操作：

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

使用Handlebars' built-in precompiler的问题在于Ember的Handlebars实现在Handlebars本身提供的功能之上添加了一些功能，因此您需要安装ember-precompile package，它提供的基本上与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>

Answer 2

您还可以使用Grunt.js和手柄模板编译器。我使用了“grunt-ember-templates”插件，效果很好。

http://gruntjs.com/

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

Answer 3

这是一个要点，展示了如何预编译把手模板并将结果添加到Ember.TEMPLATES对象，Ember可以参考该对象来解析命名模板。

https://gist.github.com/2013669

Answer 4

您可以在客户端的浏览器中进行预编译，正如Thomas Bartelmess所说。

你也可以通过nodejs使用把手进行预编译（取自我自己的Jakefile）：

var Handlebars = require('handlebars');
precompile = (function () {
    //Lovingly extracted from Ember's 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");

Answer 5

我正在使用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

Answer 6

您可以在ember视图上将预编译的把手输出设置为模板属性（而不是templateName）。这就是余烬在幕后的作用

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

Emberjs Handlebars预编译

6 个答案: