Album Example

by fangyang

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script src="https://raw.github.com/ahmacleod/data/c030ca781150c6ea51865bf260b46173f17634cf/dist/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="album">
    <h1>{{name}}</h1>
    {{view App.PhotoAlbumView coverUrlBinding="coverUrl"}}
</script>

<script type="text/x-handlebars" data-template-name="photo-album">
    <img {{bindAttr src="view.coverUrl"}} />
</script>

<script type="text/x-handlebars" data-template-name="albums">
    <h1>Albums</h1>
    {{#each controller}}
        <p>{{#linkTo 'album' this}}{{name}}{{/linkTo}}</p>
    {{/each}}
</script>

JavaScript

App = Ember.Application.create();
App.Store = DS.Store.extend({
    revision: 11,
    adapter: DS.FixtureAdapter
});

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

App.Album.FIXTURES = [{ id: 1, name: 'album', coverUrl: '/no-image.jpg'}];

App.PhotoAlbumView = Ember.View.extend({
    templateName: 'photo-album',
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('albums');
    }
});

App.AlbumsRoute = Ember.Route.extend({
    model: function() {
        return App.Album.find();
    }
});

App.Router.map(function() {
    this.resource('albums');
    this.resource('album', { path: '/album/:album_id' });
});