Question

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.

Answer 1

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}}