Simple starting point for Ember.js fiddles

by pangratz666

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.5.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}}
</script>

JavaScript

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

App.controller = Ember.ArrayProxy.create({
    content: [],

    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('a', true, 2);
App.controller.addIndividual('b', false, 1);
App.controller.addIndividual('c', true, 0);
App.controller.addIndividual('d', false, 3);

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() {
        this.set('filterName', 'deceased');
    }
}).append();