Question

我通过gulp-handlebars插件编译我的车把模板for ember，这在浏览器中工作正常，但是一旦我将{{outlet}}引入模板结构，编译运行正常，但是浏览器没有按预期渲染，似乎无法正确解析outletSource。我已经看到了几个旧的SO问题，这些问题与HB编译的问题有关，但它们有点老了，并且想知道是否有人在让它们工作方面取得任何成功。

我很确定这是因为编译，如果我将模板移动到内联<script>标签，那么它会按预期工作

路由器配置：

window.Todos = Ember.Application.create();

Todos.ApplicationAdapter = DS.FixtureAdapter.extend();

Todos.Router.map(function () {
  this.resource('todos', { path: '/' }, function () {  });
});

Todos.TodosRoute = Ember.Route.extend({
  model: function () {
    return this.store.find('todo');
  }
});

Todos.TodosIndexRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('todos');
  }
});

Todos.hbs：

<section id="main">
    {{outlet}}

    <input type="checkbox" id="toggle-all">
</section>

托多斯/ index.hbs：

<!-- random html -->

演示：

JSFiddle

Answer 1

有一个如何在这里编译ember模板的示例：https://github.com/lazd/gulp-handlebars/tree/master/examples/ember

我使用gulp-ember-handlebars插件，但现在看来gulp-handlebars正式支持ember。

主键似乎使用特定的ember-handlebars编译器：

.pipe(handlebars({
  handlebars: require('ember-handlebars')
}))

Answer 2

我使用gulp-ember-templates插件，它可以输出浏览器，amd，cjs和es6。然而对于AMD来说这是一个小小的错误，虽然我有一个解决方法，看看我的task。

Answer 3

原来我正在使用

构建脚本中的问题

.pipe(wrap('Handlebars.template(<%= contents %>)'))

而不是

.pipe(wrap('Ember.Handlebars.template(<%= contents %>)'))

Ember.js车把预编译通过Gulp

3 个答案: