CODEWITHSUNDEEP
ember.js
Aras
Aras

Reputation: 5926

How do I setup an Ember View class to be appended to a particular container?

Ember.View has a nice method called .appendTo("#container") which would allow me to specify a container div for the view. However, when I use the router and .connectOutlet method, an instance of my view is created automatically based on convention and is added to the page body element by default. Is there a way to configure the class definition of the view so that upon creation it will be inside my desired #container. Here is my view:

Jimux.BuildsView = Em.View.extend({
  templateName: 'builds',
  appendTo: '#jimux-header', #this was just a guess and did not work. but does some propery like this exist for the view?
  tagName: 'div',
  listVisible: true,
  ...

Another way to ask this question is: how do I tell Ember router to append a view to a particular item in the dom? By default the router appends the view to the body.

And here is the router bit:

# Connect builds controller to builds view
router.get('applicationController').connectOutlet("builds","builds", Jimux.buildsController)

To clarify, I dont want to put my whole Ember app in a container. I have several views in my application, and most of them are fine directly in the body. But there are a couple like the one mentioned in this question, which I want to put inside "#application-header" div.

Upvotes: 0

Views: 553

Answers (3)

thecodejack
thecodejack

Reputation: 13379

well..after understanding your question, i remember having same trouble. Also, thing is i didn't find any way to do this even after going through the Ember code. But later i understood that its for good purpose only. I know you already might have come across with handlebars with which we can acheive this. If we give a view a ID to get appended, we are constraining the application and the whole use of ember becomes useless. Ok coming to you question, as far as i know, we can acheive that appending mustache templates in you div element of HTML.

<div id="jimux-header">
{{view Jimux.BuildsView}}
</div>

This way we can use the Jimux.BuildsView where ever you want and as many times possible. The Beauty of Ember you have to say...

Upvotes: 1

jonnii
jonnii

Reputation: 28312

You can specify the root element for your application object.

window.App = Ember.Application.create({
    rootElement: '#ember-app'
});

Edit:

Having re-read your question, I think you should look into named outlets, so you could do something like:

<div id="application-header">
    {{outlet builds}}
</div>

{{outlet}}

Upvotes: 1

Daniel
Daniel

Reputation: 1692

Just add rootElement in the application object.

var App = Ember.Application.create({
    rootElement: '#container'
});

Upvotes: 0

Related Questions