Ember 1.10+grunt+EAK："Could not find <template_name> template or view" 从 1.9.1 迁移后

Question

我正在使用 Ember App Kit 和 grunt，我正在尝试切换到 Ember 1.10，但无法让 HTMLBars 工作：/

TL;DR

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

详情

我做的步骤：

更新了 ember 和 ember-数据
已更新 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'
  ],
};

从 index.html 中删除了 handlebars.js 并将 ember.js 替换为 ember.debug.js

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

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

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

export default AuthRoute.extend({

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

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

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

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

编辑[解决方案]：

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

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

而不是：

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

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

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 使 id 像 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："Could not find <template_name> template or view" 从 1.9.1 迁移后

Ember 1.10+grunt+EAK: "Could not find <template_name> template or view" after migration from 1.9.1

handlebars.js

ember.js

TL;DR

详情