Simple starting point for Ember.js fiddles

by mgrassotti

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="individuals" >
    <div>
        <a {{action "all"}} >all</a> || <a {{action "alive"}} >alive</a> || <a {{action "deceased"}} >deceased</a>
    </div>
    {{#each individuals tagName="ul" }}
        <li>{{name}} - {{living}} - {{votes_count}}</li>
    {{/each}}
    
    <hr/>
    <a {{action "addSong"}}>Add Song</a>
    <p>There are {{App.songsController.length}} songs</p>
    {{#each song in App.songsController.arrangedContent tagName="ul" }}        
        <li>{{song.trackNumber}} - {{song.title}}</li>
    {{/each}}

</script>

JavaScript

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

App.controller = Ember.ArrayController.create({
    content: [],
    sortProperties: ['name'],

    addIndividual: function(name, alive, count) {
        this.pushObject(Ember.Object.create({
            name: name,
            living: alive,
            votes_count: count
        }));
    },

    filterName: 'all',

    allFilter: function() {
        return true;
    },
    aliveFilter: function(individual) {
        return ( !! individual.living);
    },
    deceasedFilter: function(individual) {
        return (!individual.living);
    },

    filtered: function() {
        var filterName = this.get('filterName');
        var filterFunc = this.get(filterName + 'Filter');
        return this.filter(filterFunc).sort(function(a, b) {
            return (b.votes_count - a.votes_count);
        });
    }.property('content.@each', 'filterName').cacheable()

});

App.controller.addIndividual('Angie', true, 2);
App.controller.addIndividual('Brad', false, 1);
App.controller.addIndividual('Collin', true, 0);
App.controller.addIndividual('Dave', false, 3);
App.controller.addIndividual('Ed', true, 0);
App.controller.addIndividual('Fred', false, 15);
App.controller.addIndividual('Ginger', true, 25);
App.controller.addIndividual('Harry', true, 5);
App.controller.addIndividual('Ike', true, 14);


var songs;
songs = [
        {trackNumber: 4, title: 'Ob-La-Di, Ob-La-Da'},
        {trackNumber: 2, title: 'Back in the U.S.S.R.'},
        {trackNumber: 3, title: 'Glass Onion'},
      ];

      App.songsController = Ember.ArrayController.create({
        content: songs,
        sortProperties: ['title']
      });

Ember.View.create({
    templateName: 'individuals',
    individualsBinding: 'App.controller.filtered',
    filterNameBinding: 'App.controller.filterName',

    all: function() {
        this.set('filterName', 'all');
    },
    alive: function() {
        this.set('filterName', 'alive');
    },
    deceased: function() {
       ...