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?

score 3 · Accepted Answer · answered Apr 30 '14 at 02:32

3

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

answered Apr 30 '14 at 02:32

Kingpin2k

47,277
10
78
96

Is there a way to do in Ember 3 ? – Chendraayan Apr 03 '21 at 18:28

score -1 · Answer 2 · answered Apr 30 '14 at 08:00

-1

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

answered Apr 30 '14 at 08:00

Marek Fajkus

589
4
14

1

As of Ember 2 the usage of views is discouraged, they are used internally only and components should be used instead – Moataz Elmasry Jan 14 '15 at 15:35
This answer is from 2014 though. I can't really see the future, sorry. – Marek Fajkus May 04 '19 at 20:10

Insert Ember Component in to a specific DOM element?

2 Answers2

Linked