Similar to Apple Finder

incl foundation.css

by Unspecified

HTML

<script src="http://fiddle.nonolog.de/lib/handlebars.js"></script>
<script src="http://fiddle.nonolog.de/lib/ember.js"></script>
<script src="http://fiddle.nonolog.de/lib/ember-data.js"></script>
<link rel="stylesheet" href="http://fiddle.nonolog.de/css/foundation.min.css">
<script type="text/x-handlebars" data-template-name="application">
    <h1>Example</h1>
    {{outlet}}
</script>
    
<script type="text/x-handlebars" data-template-name="index">
    Hello Ember
</script>    

<script type="text/x-handlebars" data-template-name="groups">
    <div class="row">
    {{template "groupMenu"}}    
    </div>
</script>

<script type="text/x-handlebars" data-template-name="groupMenu">
    <div class="row">
      <div class="small-4 large-4 columns">
          <h3>All Groups</h3>
          <ul>
            {{#each group in controller}}
                <li>{{#linkTo "group" group}}{{group.name}} {{/linkTo}}</li>
            {{/each}}
        </ul>
      </div>
      <div class="small-8 large-8 columns">{{outlet}}</div>
    </div>    
</script>

<script type="text/x-handlebars" data-template-name="group">
    <h3>Group:</h3>
    <ul>
    {{#each device in devices}}
        <li>{{#linkTo "detail" device}}{{device.name}}{{/linkTo}}</li>
    {{/each}}
    </ul>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="detail">
    <h3>Details: <i>{{name}}</i></h3>
    <p>{{desc}}</p>
</script>

CSS

a.active {
    background: #ccc;
}

JavaScript

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

App.Store = DS.Store.extend({
	revision	: 12,
	adapter		: 'DS.FixtureAdapter'
});

App.Router.map( function() {
    this.resource('groups', function(){
        this.resource('group', {path: ":group_id"}, function(){
            this.resource('detail', {path: ":id"});
        });
    });
});

App.GroupIndexRoute = Ember.Route.extend({
    redirect: function(){
      var model = this.controllerFor('group').get('model');
      this.transitionTo('detail',model);
    }
});

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

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

/*App.GroupRoute = Ember.Route.extend({
    renderTemplate : function(e) {
        
        console.log(">", e );
        var controller = this.controllerFor('group');
        
        this.render( 'group', {
            outlet : 'group',
            controller: controller
        });
        
        this.render( 'detail', {
            outlet : 'detail',
            controller: controller
        });
    }
});*/
/*App.DetailRoute = Ember.Route.extend({
    renderTemplate : function() {
        //this.render( {controller: 'group'} );
    }
});*/

/*App.GroupsController = Ember.ArrayController.extend({
});*/


App.Device = DS.Model.extend({
    name : DS.attr('string'),
    desc : DS.attr('string'),
    groups: DS.hasMany('App.Group')
});
App.Device.FIXTURES = [{
    id : 1,
    name: "Plug1",
    desc: "Switch off light in livingroom",
    groups: [1]
},
{
    id : 2,
    name: "Media Plug2",
    desc: "Power down media center",   
    groups: [1]
}
];

App.Group = DS.Model.extend({
    name : DS.attr('string'),
    desc : DS.attr('string'),
    devices : DS.hasMany('App.Device')
});
App.Group.FIXTURES = [{
    id : 1,
    name: "Group 1",
    desc: "Example for Group 1",
    devices : [1,2]
},
{
    id : 2,
    name: "Group 2",
    desc: "Example for...