成员1.10+grunt+EAK:从1.9.1迁移后“找不到<template_name>模板或视图”

Question

我正在与grunt一起使用Ember，我试图切换到Ember1.10，无法让HTMLBars工作:/

TL;DR

迁移之后，我已经在Ember.TEMPLATES中保存了我的Ember.TEMPLATES模板，但是无论是在Ember还是在App.__container.lookup.cache中都看不到它们。

详细信息

我所做的步骤：

• 最新的成员和成员-数据
• 更新的package.json ("grunt-ember-templates": "0.5.0")
• 更新了我的Gruntfile.js (grunt.loadNpmTasks('grunt-ember-templates')添加了一个任务emberTemplates)
• 将选项传递给emberTemplates： { debug：[]，选项：{ templateCompilerPath：‘供应商/成员/成员-模板-编译器.app’，handlebarsPath：‘供应商/工具栏/handlebars.js’，templateNamespace：'HTMLBars‘}，'public/assets/templates.js'：’app/template/**/*..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解析器(ember-application/system/resolver)在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使ids类似于application，而不是templates/application。或者在你的例子中，app/templates/application。

要回答您的额外问题2，请在加载templates.js之后但在app.js之前放置ember.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中。

也许有人会发现它有用;)