ember.js - Ember 1.10 + grunt + EAK:从1.9.1迁移后的 “Could not find template or view”

Question

我正在将Ember App Kit与grunt一起使用，并且尝试切换到Ember 1.10，并且无法使HTMLBars运行:/

TL; DR

迁移之后，我将HTMLBars模板放置在Ember.TEMPLATES中，但它们既不能被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'
  ],
};

从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使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'
            }
        }
    },