Ember Appending Views

Ember Appending Views Around Existing HTML

by amindunited

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>I'm the start of the application template</h1>
</script>
<script type="text/x-handlebars" data-template-name="fooTemplate">
    <h1>I'm foo's template</h1>
</script>
<script type="text/x-handlebars" data-template-name="barTemplate">
    <h1>I'm bars's template</h1>
</script>
<div id="appWrap">
    <div id="topWrap"></div>
    <div id="middle">I'm a div in the middle</div>
    <div id="bottomWrap"></div>
    
</div>

JavaScript

$(function(){
    window.MyApp = Em.Application.create({
        rootElement:'#appWrap',
        templateName: "applicaton",
        autoInit: false
    })
    MyApp.ApplicationController = Em.Controller.extend();
    MyApp.ApplicationView = Em.View.extend()
    MyApp.router = Em.Router.create({
        enableLogging: true,
        root: Em.Route.extend({
            index: Em.Route.extend({
                route:'/',
                enter:function(){
                    MyApp.BarView.create().appendTo('#topWrap');                    
                    MyApp.FooView.create().appendTo('#bottomWrap');
                },
                connectOutlets:function(router, context){
                    
                }
            })        
        })
    })
    
    MyApp.FooView = Em.View.extend({
        templateName: 'fooTemplate'
    })


    MyApp.BarView = Em.View.extend({
        templateName: 'barTemplate'
    })

        
    MyApp.initialize(MyApp.router);   
    
})