admin管理员组

文章数量:1316854

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
Share Improve this question edited Aug 5, 2012 at 23:05 outside2344 asked Aug 5, 2012 at 16:21 outside2344outside2344 2,1152 gold badges31 silver badges56 bronze badges 4
  • 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
Add a ment  | 

1 Answer 1

Reset to default 13

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>

本文标签： javascriptemberjs appending view to just before ltbodygtStack Overflow

版权声明：本文标题：javascript - ember.js appending view to just before &lt;body&gt; - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742011799a2413021.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。