Override Default Ember.js Behavior

by Andrew Gerst

HTML

<script src="http://emberjs.com.s3.amazonaws.com/getting-started/jquery.min.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/handlebars.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember.js"></script>
<script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="App">
    <div class = "container">
        <div>Outer Container</div>
        <div>{{outlet}}</div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="Books">
    {{#each book in controller}}
    <div>
        {{#linkTo Book book}} {{book.name}} by {{book.author}} {{/linkTo}}
    </div>
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="Book">
    <div>Name: {{name}}</div>
    <div>Author: {{author}}</div>
</script>

CSS

div.container,
div.container > div{
    border:1px solid #ccc;
    padding: 15px;
}

JavaScript

console.clear();

window.App = Ember.Application.create({});

App.Router.map(function() {
	this.resource('App', { 'path' : '/' }, function() {
        this.resource('Books', { 'path' : '/books'}, function() {
			this.resource('Book', { 'path' : '/:book_id' });
		});
	});
});

App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});

App.Book = DS.Model.extend({
    name : DS.attr('string'),
    author: DS.attr('string')
});

App.Book.FIXTURES = [
    {
        id : 1,
        name : "1984",
        author : "George Orwell"
    },
    {
        id : 2,
        name : "The Catcher in the Rye",
        author : "J.D. Salinger"
    }
];

// by default transition to 'Books' route
App.AppIndexRoute = Ember.Route.extend({
	redirect : function() {
		this.transitionTo('Books');
	}
});

App.BooksRoute = Ember.Route.extend({
    renderTemplate : function() {
		this.render("Books", {
			into : "App"
		});        
    },
    model : function() {
        return App.Book.find();   
    }
});

App.BooksIndexRoute = Ember.Route.extend({
    renderTemplate : function() {
		this.render("Books", {
			into : "App"
		});        
    },
    model : function() {
        return App.Book.find();   
    }     
});

App.BooksController = App.BooksIndexController = Ember.ArrayController.extend({

});

App.BookRoute = Ember.Route.extend({
    renderTemplate : function() {
		this.render("Book", {
			into : "App"
		});
    },
    model : function(params) {
        return App.Book.find(params.book_id);   
    }
});