Ember.js Base fiddle

by rtremaine

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<div>Header Content</div>
<script type="text/x-handlebars" data-template-name='application'>
    <div>{{view App.ListView}}</div>
</script>
<div>Footer Content</div>

<script type="text/x-handlebars" data-template-name='item'>
    {{view.content.title}}
</script>

JavaScript

App = Ember.Application.create();
    
App.ApplicationController= Ember.ArrayController.extend({         
});

App.ListController = Ember.ArrayController.extend({
    content: [
        {id: 1, title:'Test 1'},
        {id: 2, title:'Test 2'},
        {id: 3, title:'Test 3'}
    ]      
});
    
App.ApplicationView = Ember.View.extend({
    templateName: 'application', 
});
    
App.ItemView = Ember.View.extend({
    templateName: 'item'        
});

App.ListView = Ember.CollectionView.extend({
    tagName: 'ul',
    contentBinding: 'App.router.listController',
    itemViewClass: App.ItemView, 
});

App.Router = Ember.Router.extend({
    location: Ember.Location.create({implementation: 'hash'}),
    root: Ember.Route.extend({
        route: '/'
    })            
});

App.initialize();