I'm getting started with Ember.js with the 1.0 prerelease version and have run into a stumper.

In my HTML, I have this:

<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>

<script type="text/javascript">
    $(function() {
        console.log("starting Ember app");
        App.initialize();
    });
</script>

<div id="footer">
    ... footer html ...
</div>
</body>

This all seems to work fine EXCEPT that instead of placing the view where the {{outlet}} is it instead appends it just before the closing body tag such that it displays below the footer.

Here is the router I'm using:

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'portfolios'
        }),
        portfolios: Ember.Route.extend({
            route: '/portfolios',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('portfolios', App.Portfolio.find());
            }
        })
    })
});

What am I doing wrong?

I'm getting started with Ember.js with the 1.0 prerelease version and have run into a stumper.

In my HTML, I have this:

<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>

<script type="text/javascript">
    $(function() {
        console.log("starting Ember app");
        App.initialize();
    });
</script>

<div id="footer">
    ... footer html ...
</div>
</body>

This all seems to work fine EXCEPT that instead of placing the view where the {{outlet}} is it instead appends it just before the closing body tag such that it displays below the footer.

Here is the router I'm using:

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'portfolios'
        }),
        portfolios: Ember.Route.extend({
            route: '/portfolios',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('portfolios', App.Portfolio.find());
            }
        })
    })
});

What am I doing wrong?

• javascript
• ember.js

• 1 The template is only the template and does not influence where it is to be applied. The template could also be in the head, or loaded dynamically and not appear in the DOM at all. – Bergi Commented Aug 5, 2012 at 16:28
• You have to connect a view to this outlet. Could you post a jsfiddle of the plete code ? – sly7_7 Commented Aug 5, 2012 at 16:32
• They are 100% correct, if you don't specify an object (or selector) the default "append" on an view will select the body (... and append on body will slide it right after the footer). – SciSpear Commented Aug 5, 2012 at 22:11
• Ah, ok - I think the final part of this that I'm missing is how I specify the DOM element that the template should be attached to. I added my router - how do I get the PortfoliosView so I can do something like: portfoliosView.appendTo('#container'); – outside2344 Commented Aug 5, 2012 at 22:53

1 Answer 1

Many thanks to all of the ments above - I figured it out with their help--

On my application object I needed to specify a rootElement ala:

App = Ember.Application.create({
    rootElement: '#app',
    ...

and then add a div to the HTML to attach the template with the outlet to:

<div id="app"></div>