在余梁轨道中创建零部件时的命名约定

Question

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

据我所知，一个组件需要扩展Ember。组件也有自己的模板，两者都需要正确命名，然后才能在车把内使用，也可以放在任何模板中。

我哪里错了？

# 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模板中包含｛｛目录｝｝并尝试打开somepage 后，控制台给了我这个荒谬的错误

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

[编辑1:在宝石自述中找到了更多信息。Daah。实际上没想到它会有更多信息。现在浏览：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遇到一个未知的手把辅助对象时，它会检查您是否在"components/"中将其定义为模板，如果是，则使用该模板。