Insert Ember Component in to a specific DOM element?

Question

I'm trying to insert an Ember Component into a specific DOM element: <div id="component"></div>

I currently have this code:

   var App = Ember.Application.create();

   App.NavigationBarComponent = Ember.Component.extend({
     tagName: 'nav'
   });

And:

 <script type="text/x-handlebars" id="application">
     <h1>Component</h1>
 </script>

How would I go about doing this?

Answer 1

You can create an instance of the component then use appendTo to append it to an element on the page. This is not a normal use case, but you can do it.

var comp = App.FooBarComponent.create();
comp.appendTo('#someArea');

http://emberjs.jsbin.com/yepibibe/1/edit

Answer 2

Or you can create view insted of commponent. http://emberjs.com/api/classes/Ember.View.html