Ember.js Emberjs车把预编译

我的Emberjs应用程序运行缓慢，所以我想预编译我的模板以简化运行时。然而，我不知道如何继续。我阅读了和Emberjs的介绍，但是没有，我所能做的只是按照网站上的说明创建一个模板文件，我不知道如何在Emberjs中使用这个模板文件

---

如何在Emberjs中预编译模板？要在ember JS中使用模板文件，我应该如何处理它？

您可以在ember视图中将预编译手柄输出设置为模板属性（而不是templateName）。这是灰烬在引擎盖下也做的

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

MyApp.MyView=Ember.View.extend({
templateName:“myViewWhatever”，
模板：Ember.handlebar.compile（'{{{blah}}
'），
})

以下是一个要点，说明如何预编译把手模板，并将结果添加到Ember.templates对象中，Ember会参考该对象来解析命名模板

---

为了澄清，Thomas编写的示例仍在运行时进行模板编译。不过，我认为他的观点是，在你加载你的文件后，你可以这样做：

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

使用的问题是，Ember的Handlebar实现在Handlebar本身提供的功能的基础上添加了一些功能，因此您需要安装，它提供与

Handlebar

命令行实用程序基本相同的接口，但使用Ember的Handlebar实现

这将避免您必须将所有

templateName

s更改为

template

s，并且必须在每个视图中添加

Ember.TEMPLATES…

，因为它会自动更新Ember的内置模板缓存

因此，假设您已经将预编译的

templates.js

文件作为

ember-precompile-templates/*.handlebar-f-templates/templates.js

的输出加载，下面是一个更完整的worker导入/初始化顺序示例片段：

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

var App=Ember.Application.create（）；
App.initialize（）；

如Thomas Bartelmes所述，您可以在客户端浏览器中预编译

您还可以通过nodejs（取自我自己的文件）使用Handlebar进行预编译：

---

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

---

我将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));
});

然后我使用Handlebar运行库，而不是完整版本

---

余烬车把：

如何预编译部分？我认为您的示例展示了普通车把编译。我的印象是Ember.Handlebar应该用于预编译模板。@LukeMelia你完全正确，这不是很清楚——我在我的机器上称Ember预编译脚本为“Handlebar”，这真是让人困惑。它现在是

ember预编译
，可以通过NPM安装：）我发现我编译的模板使用的是“Handlebar.helpers”而不是“ember.Handlebar.helpers”。因此，大多数常见的余烬助手——视图、部分、插座等都不可用，这让我抓狂。谢谢我很兴奋这会起作用，太快了。“我没有收到此错误”模板是使用比当前运行时旧的Handlebar版本预编译的。请将预编译器更新为新版本（>=1.0.0-rc.3）或将运行时降级为旧版本（但后来我发现了这一点，它很有魅力：这不是预编译。如果您使用
gulp
我最近向npm发布了一个名为的包，它将把您的把手模板编译成javascript，然后您可以将它们压缩成一个文件，可能是
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));
});