Project nested route

by Sylvain MINA

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name='application'>
  <h1>Dash Router App</h1>
  {{#each App.dash.store}}
  <a {{action toggle name href=true}}>{{name}}</a>
  {{/each}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name='dash'>
  {{#each controller}}
  <h1>{{detail}}</h1>
  {{/each}}
</script>

CSS

a {
    color: blue
}

JavaScript

$(function () {
    App = Ember.Application.create();
    App.Item = Ember.Object.extend({
        name: null,
        detail: null
    });

    App.dash = Ember.Object.create({
        FIXTURE: [{
            name: 'foo',
            detail: 'Some very interesting foo'
        }, {
            name: 'bar',
            detail: 'Bar is the root of all stuff'
        }, {
            name: 'ted',
            detail: 'Ted is not my name'
        }],
        store: [],
        
        selected: [],
        
        _items: [],
        
        watchItems: function () {
            console.log('watch items', this.get('selected'));
            var self = this;
            this.get('_items').clear();
            this.get('selected').forEach(function (name) {
                var item = self.get('store').findProperty('name', name);
                console.log(name);
                self.get('_items').pushObject(item);
            });
        }.observes('selected.@each', 'store.@each'),
        
        toggle: function (name) {
            var selected = this.get('selected');
            var index = selected.indexOf(name);
            if (index !== -1) {
                selected.removeObject(name);
            } else {
                selected.pushObject(name);
            }
            console.log('toggle', name, 'is now selected?', selected.indexOf(name) !== -1, selected);
            this.set('selected', selected);
        },
            
        fetch: function () {
            var FIXTURE = this.get('FIXTURE');
            var store = this.get('store');
            if (store.length == 0) {
                Ember.run.later(function () {
                    FIXTURE.forEach(function (item) {
                        store.pushObject(item);
                    });
                }, 2000);
            }
        },  
            
        items: function (selected) {
            if (Ember.isArray(selected)) {
                this.set('selected', selected);
            }...