CODEWITHSUNDEEP
javascriptember.js
outside2344
outside2344

Reputation: 2105

ember.js appending view to just before </body>

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?

Upvotes: 3

Views: 1775

Answers (1)

outside2344
outside2344

Reputation: 2105

Many thanks to all of the comments 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>

Upvotes: 13

Related Questions