Ember.js v0.9.7

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.7.js"></script>
<script type="text/x-handlebars">
    {{view App.ColoursView contentBinding="App.colours"}}
</script>

<script type="text/x-handlebars" data-template-name="colour">
    <h2>Things which are {{content.colour}}</h2>
    {{view App.ThingsView contentBinding="things"}}
</script>

<script type="text/x-handlebars" data-template-name="thing">
    {{content.name}} - {{content.colour}} 
    {{#unless isBlue}}
        <button {{action makeBlue}}>make it blue</button>
    {{/unless}}
</script>

JavaScript

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

App.colours = Ember.ArrayController.create({
    init: function() {
        this.set("content", [
            Ember.Object.create({colour: "blue"}),
            Ember.Object.create({colour: "red"}),
            Ember.Object.create({colour: "orange"}),
            Ember.Object.create({colour: "yellow"}),            
            Ember.Object.create({colour: "green"})
        ]);
    }
});

App.ColoursView = Ember.CollectionView.extend({
    itemViewClass: "App.ColourView"
});

App.ColourView = Ember.View.extend({
    templateName: "colour",
    
    things: function() {
        var colour = this.getPath("content.colour");
        return App.get("things").ofColour(colour);
    }.property("App.things.byColour")
});

App.things = Ember.ArrayController.create({
    init: function() {
        this.set("content", [
            Ember.Object.create({name: 1, colour: "blue"}),
            Ember.Object.create({name: 2, colour: "red"}),
            Ember.Object.create({name: 3, colour: "yellow"}),
            Ember.Object.create({name: 4, colour: "blue"}),
            Ember.Object.create({name: 5, colour: "red"}),
            Ember.Object.create({name: 6, colour: "green"})            
        ]);
    },
        
    byColour: function(colour) {
        var indexed = {};
        this.get("content").forEach(function(item){
            var colour = item.get("colour");
            if (indexed[colour]) {
                indexed[colour].push(item);
            } else {
                indexed[colour] = [item];
            }
        });
        
        return indexed;
    }.property("[email protected]"),
    
    ofColour: function(colour) {
        return this.get("byColour")[colour] || [];
    },
    
    blue: function() {
        return this.ofColour("blue");
    }.property("byColour")
});

App.ThingsView = Ember.CollectionView.extend({
    itemViewClass: "App.ThingView",
    tagName: "ul"
});

App.ThingView = Ember.View.extend({
   ...