Search code examples
ember.jscomponentsember-octane

Ember 3.15, seperating components javascript from template files


Is it possible to separate the templates .hbs from component class javascript .js in Ember 3.15 Octane.

A folder structure like:

app/
   components/
     js/
     hbs/

Solution

  • The “classic” directory structure does separate component Javascript and template files, but not in the way you specified. Running ember generate component component-name --component-structure classic --gc would result in this structure (ignoring the tests directory):

    app/
      components/
        component-name.js
        templates/
          component-name.hbs
    

    If you really must have the directory structure you specified, you could accomplish it using a custom resolver. Here’s a blog post that gives a high-level overview of that. I’d caution against that kind of thing, though, as it’s usually beneficial to stick with what most of the community uses, and in 3.15 that’s the flat component structure. What’s your use case?