Question

我正在使用带有grunt的Ember App Kit，我正在尝试切换到Ember 1.10并且无法使HTMLBars正常工作：/

TL; DR

迁移后，我在Ember.TEMPLATES中添加了我的HTMLBars模板，但它们在Ember和App.__container.lookup.cache中都不可见。

详细信息

我做的步骤：

更新了ember和ember-data
已更新package.json（"grunt-ember-templates": "0.5.0"）
更新了我的Gruntfile.js（grunt.loadNpmTasks('grunt-ember-templates')添加了一项任务emberTemplates）

将选项传递给emberTemplates：

{
  debug: [],
  options: {
    templateCompilerPath: 'vendor/ember/ember-template-compiler.js',
    handlebarsPath: 'vendor/handlebars/handlebars.js',
    templateNamespace: 'HTMLBars'
  },
  'public/assets/templates.js': [
    'app/templates/**/*.hbs'
  ],
};

从handlebars.js移除了index.html，并将ember.js替换为ember.debug.js

现在，我已经以正确的方式生成了public/assets/templates.js文件，我有几个来自ember-template-compiler的编译错误，所以我认为这部分工作正常。

最后，在应用中，我可以看到Ember.TEMPLATES变量中加载了所有模板，但不幸的是，它们无法从App.__container__.lookup.cache或App.__container__.lookup('template:<template_name>')访问。

我试图呈现抛出错误的模板的方式是（并且它与Ember 1.9一起使用）：

export default AuthRoute.extend({

  renderTemplate: function() {
    this.render();
    this.render('user-details', {
      into: 'base',
      outlet: 'profile',
      controller: 'user-details'
    });
  }
});

我错过了什么？任何帮助将不胜感激。

加分问题：debug配置中的emberTemplates字段是什么？如果我没有定义它，它会在编译时引发错误（Required config property "emberTemplates.debug" missing.）。这可能是一个原因吗？

奖金问题2：templates.js文件应该放在哪里？直觉告诉我/tmp然后，即使Ember.TEMPLATES是一个空对象......

编辑[解决方案]：

我在templateBasePath: "app/templates"选项中错过了emberTemplates行。因此，Ember.TEMPLATES对象与此类似：

{
  "app/templates/base.hbs": {},
  "app/templates/components/component.hbs": {}
}

而不是：

{
  "base.hbs": {},
  "components/component.hbs": {}
}

这是ember-application/system/resolver方法中Ember解析器（resolveTemplate）所期望的格式。

Answer 1

编辑：使用grunt-ember-templates和这个Gruntfile任务，我得到了它的工作：

emberTemplates: {
    options: {
        precompile: true,
        templateBasePath: "templates",
        handlebarsPath: "node_modules/handlebars/dist/handlebars.js",
        templateCompilerPath: "bower_components/ember/ember-template-compiler.js"
    },
    "dist/js/templates.js": ["templates/**/*.hbs"]
}

差异似乎是precompile: true，并将handlebarsPath指向node_modules中的依赖关系。此外，templateBasePath会使application代替templates/application。或者在你的情况下app/templates/application。

要回答你的奖金问题2，请在加载ember.js之后但在app.js之前输入templates.js.我的脚本包括如下所示：

<script type="text/javascript" src="/bower_components/ember/ember.debug.js"></script>
<script type="text/javascript" src="/bower_components/ember/ember-template-compiler.js"></script>
<script type="text/javascript" src="/js/templates.js"></script>
<script type="text/javascript" src="/js/app.js"></script>

====================================

编辑：忽略这个新词......

似乎grunt-ember-templates任务已过时，或其依赖关系已过时。去掉它。我能够将这个解决方案合并在一起：

请改用grunt-contrib-concat。这笔钱是process选项。

    concat: {
        dist: {
            // other concat tasks...
        },
        templates: {
            options: {
                banner: '',
                process: function(src, filepath) {
                    var name = filepath.replace('app/templates/','').replace('.hbs','');
                    var Map = {
                        10: "n",
                        13: "r",
                        39: "'",
                        34: '"',
                        92: "\\"
                    };
                    src = '"' + src.replace(/[\n\r\"\\]/g, function(m) {
                        return "\\" + Map[m.charCodeAt(0)]
                    }) + '"';                       

                    return 'Ember.TEMPLATES["'+name+'"] = Ember.HTMLBars.template(Ember.HTMLBars.compile('+src+'));\n';
                }
            },
            files: {
                'public/assets/templates.js': 'app/templates/**/*.hbs'
            }
        }
    },

Answer 2

所以整个解决方案如下：

module.exports = {
  debug: {
    src: "app/templates/**/*.{hbs,hjs,handlebars}",
    dest: "tmp/result/assets/templates.js"
  },
  dist: {
    src: "<%= emberTemplates.debug.src %>",
    dest: "<%= emberTemplates.debug.dest %>"
  },
  options: {
    templateCompilerPath: 'vendor/ember/ember-template-compiler.js',
    handlebarsPath: 'vendor/handlebars/handlebars.js',
    templateNamespace: 'HTMLBars',
    templateBasePath: "app/templates"
  }
};

我的所有模板都位于app/templates/目录中。

我还在使用：

<script src="/assets/templates.js"></script>

index.html中的

。

也许有人会发现它很有用;）

Ember 1.10 + grunt + EAK：从1.9.1迁移后无法找到<template_name>模板或视图</template_name>

TL; DR

详细信息

2 个答案: