Ramiro Franco

Appending Parent and Child Views Using Ember After Dom Ready

Written on Sunday July 22, 2012 at 7:04 a.m.

For some reason I can't seem to find any guides on how to implement new views in Ember after the dom is loaded. You'd think that this would be a pretty frequent task for people aggregating their data without using the ember-data thing. At this point, I've figured it out so I decided to write a few quick samples to help other people get this relatively easy task accomplished. Please note, these samples are all in CoffeeScript, you'll have to translate to javascript as necessary.

First off, setup your Container. I like to set this right after my app to make sure it's available:

This will attach the main ember container to your content, simple enough right?

Next we'll want to create a view for whatever object / array we have going for us. Personally I love using the Ember Array controllers, which we won't go into detail here, but are super useful for collections. Also, you'll want to make sure your view is already setup. I like using the ember-rails gem because it makes sprocket integration easy. So we setup our super simple view:

Now we've got our parent container, and our view, how do we make it appear? Well, I ended up handling this with my controller, so in my controller I have this tidbit:

Now it's up to you to find out where and how you want to execute that, I'm doing it after loading my data successfully.

That's it! that should get your child view to load in parent container in Ember. I know there's bits and pieces left out ( especially data handling ), but I figure most people these days are probably handling data in Ember their own way, but if you want help on that, just let me know!