Naming conventions when creating a component in ember-rails

Question

I'm creating my first ever component but most tutorials are assuming Im not using ember-rails.

As I understand it, a component needs to extend Ember.Components and also have it's own template and both need to be named correctly then it can be used inside handlebars and placed in whichever template.

Where am I going wrong?

# 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}}

The console is giving me this nonsensical error after I include {{table-of-contents}} in the somepage template and I try to open somepage

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

[Edit 1: Found more info within the gem README. Daah. Actually did NOT expect it to have more info on this. Going through now: https://github.com/emberjs/ember-rails ]

Answer 1

As designed, your component does not actually require any custom javascript. I'm not sure exactly how ember-rails is compiling your individual source files, but the html source for your component should look something like this.

<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>

When ember encounters an unknown handlebars helper, it checks to see if you have it defined as a template in "components/" and - if so - uses that.