Loading per-model templates via Ajax

1

I’m creating an application where a certain model can specify what template it needs to be rendered in, and there could potentially be dozens or hundreds of templates involved, so I’d like to be able to load them as-needed via Ajax. I’m fairly new to Ember, so I’m still trying to figure out where everything goes. After spending several evenings reading various snippets spread around the Ember docs and Stackoverflow, I managed to cobble something together. While there’s plenty of examples for each individual part in isolation, there’s frustratingly little that shows how everything works together in the context of a larger app. I’d really like to get some feedback on how this code is structured, and if there’s a better way to organize everything more elegantly, but the major problem I’m having now is that most of the time the app attempts to render the template before the ajax has finished loading it. Here’s a POC in a fiddle.

Error: Assertion Failed: You specified the templateName list for <App.SectionView:ember264>, but it did not exist.

Besides that loading error, there’s several things that I feel I’ve hacked together, but I couldn’t make it work otherwise. Here’s a couple things I think could be better:

  1. In the main template, I’m using #each and {{view App.SectionView...}}. It seems like I should be able to replace that entire thing with a {{render "sections" sections}}, and have the SectionsController trigger the AJAX loading of the templates, but I was never able to figure out where to put the code that it would actually run at the right time.
  2. It also seems like I should somehow be using a ContainerView to wrap all the sections, but I was having trouble figuring out how to get the ContainerView to access its associated controller so I could get to the model’s template, or alternatively have the controller access its container view to be able to #pushObject the views it creating. The ContainerView docs all show child views being defined and initialized in the “root” of the javascript example code, and I honestly have no idea if that should go in a controller or a route, or even what function would be the right place to put that.

Ember has really nice docs for each of the individual parts, but trying to figure out how to fit it all together in anything more advanced than a TODO app is really quite complicated.

I appreciate any help.

2

Hi,

Have find a solution for this? or maybe a working example?

Thank you…