ember.js - Ember 1.10+咕噜+EAK : "Could not find <template_name> template or view" after migration from 1. 9.1

Question

我正在使用 Ember 应用程序套件 grunt我正在尝试切换到 Ember 1.10，但无法让 HTMLBars 工作:/

TL;DR

迁移后，我的 HTMLBars 模板已加载到 Ember.TEMPLATES 中但它们在 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 解析器 ( 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 使 id 类似于 application，而不是 templates/application。或者在您的情况下app/templates/application。

要回答您的附加问题 2，请将 templates.js 放在加载 ember.js 之后、app.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'
            }
        }
    },