Breaking a large template into smaller templates

Hello everyone!

I’ve been adding to a homepage.hbs template and it’s getting too big. I want to break my homepage into different sections like:

  • homepage-dashboard.hbs
  • homepage-sidebar.hbs
  • homepage-footer.hbs

I’ve created these files, stuck them in the templates folder, and referred to them in the parent template, homepage.hbs, but they aren’t showing up. How can I register these new template files so I can use them inside of the original homepage.hbs template?

Context:

I am using ember 2.14 and not using ember-cli, so none of the ember generate commands will work for me. I would need to know how ember recognizes new templates that I create.

Thank you so much for the help!!

Templates have a 1:1 correspondence with either a route or a component. There used to be a construct called “partials” which is basically what you’re trying to achieve, however i would strongly recommend against using it even though you’re on older Ember. Partials have been deprecated and will be removed soon. See the deprecation guide for partial

One of the main reasons partials were deprecated was because there’s a better construct: components (there are other reasons too). Generally if a route template is getting too big that’s a signal it should be broken up into components. If you have lots of backing JS this often results in cleaner JS too as you will organize it by what needs it instead of ending up with a big pile of stuff for one page.

I’d recommend moving your new templates to templates/components/ and then making sure you’re invoking each components with the args that it needs (or moving them to the backing class of the respective component). I forget if you must generate a backing class in Ember 2.x but I don’t think so?

1 Like

I will look into how to make components, thanks a bunch! :+1: