在ember-rails中创建组件时的命名约定

Question

我正在创建我的第一个组件，但大多数教程都假定我没有使用ember-rails。

据我所知，组件需要扩展Ember.Components，还需要有自己的模板，两者都需要正确命名，然后才能在handlebars中使用，并放置在任何模板中。

我哪里错了？

# app/assets/javascripts/components/table-of-contents.js.coffee
App.TableOfContentsComponent = Ember.Component.extend

# app/assets/javascripts/templates/components/table-of-contents.js.hbs
<h2>Look Ma! My component works!
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

# app/assets/javascripts/templates/somepage.js.hbs
<h1>Here be Some Page with it's own Table of Contents</h2>
{{table-of-contents}}

当我在somepage模板中包含{{table-of-content}}并尝试打开somepage时，控制台显示此无意义的错误

Uncaught Error: Assertion Failed: You must pass a view to the #view helper, not function () {

[编辑1:在gem自述文件中找到更多信息。啊哈。实际上没有想到它会有更多关于这方面的信息。正在处理中：https://github.com/emberjs/ember-rails ]

Answer 1

按照设计，您的组件实际上不需要任何自定义javascript。我不确定ember-rails是如何编译你的各个源文件的，但是你的组件的html源文件应该是这样的。

<script type="text/x-handlebars" id="index">
  <h1>Here be Some Page with it's own Table of Contents</h2>
  {{table-of-contents}}
</script>

<script type="text/x-handlebars" id="components/table-of-contents">
  <h2>Look Ma! My component works!
  <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
  </ul>
</script>

当ember遇到未知的handlebars帮助器时，它会检查您是否将其定义为"components/“中的模板，如果是，则使用该模板。