Component Hierarchies and Template file grouping

Ember CLI
1

As I’m refactoring my code into components, I"m finding that component hierarchies are working well. The only issue I’m running into is with the template naming requirements. I’d like to be able to have multiple templates in a components directory, that I can lookup dynamically. An example below of whats working and whats not:

side-bar/
|__component.js
|__template.hbs
|__sidebar-links/
    |_component.js
    |_template.hbs
|_sidebar-drawer/
  |_component.js
  |_template-one.hbs
  |_template-two.hbs
  |_...

So – as a simplification, my sidebar-drawer component can make use of many templates (as partials, or sometimes childViews with the layout property dynamically set), swapping them out based on links. I’d ideally like to group them together. Instead, to do something like this i"m forced to keep them in the /app/templates directory, or treat them like components.

I think I can get this working by modifying the templates compiler (found [here]):

app._podTemplatePatterns = function() {
  return this.registry.extensionsForType('template').map(function(extension) {
    return new RegExp(extension + '$');
  });
};

This compiles all templates having hbs extensions, regardless of location. But I’m then unable to look them up – presumably i’d need to sub-class the Resolver as well. I’m fine to start going down that path, but a few questions:

  1. Should I be hesitant about using the (seemingly) private method _podTemplatePatterns above?
  2. Is it just happenstance that the above compiles everything in my Components directory?
  3. Is it a bad idea to modify the resolver to accomadate this (e.g. performance impact?)
  4. Any other thoughts?

I’m sure I"m not the first person to try and do this – just wanted to get some input as I don’t know any other Ember developers.

2

I think approved method is components with components.

sidebar
  comp1
  comp2

then you can use

I haven’t tried folders with folders for pods but my understanding is that it does work.
https://github.com/emberjs/ember.js/issues/10407

For your alternative solution it maybe a good idea to file an issue, especially given the level of activity around pods.

https://github.com/ember-cli/ember-cli/issues/3234

https://github.com/ember-cli/ember-cli/issues/3424

3

Thank you – and that component helper is actually very useful and will solve a few problems we have now!

But it does leave the template issue. The main thing I’m trying to avoid is the following dichotomy:

  1. Make a folder for a single template file, and treat it as a component
  2. Keep the template in the templates folder

Of course, either of those technically work. I’m merely trying to keep the folder structure as organized and similar to the component structure as possible.

Also – My post dissappeared after I posted it – I thought at the time because it was moderated for being answerable (now guessing put on hold since i"m new) – I crossposted to Stackoverflow in the meantime.