users layout with Ember JS

users layout with Ember JS

by pudgecon

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.min.js"></script>
<script type="text/x-handlebars">
    <div class="wrapper">
        <div class="sidebar">Sidebar</div>
        <div class="main">
            <div class="toolbar">Toolbar</div>
            <div class="content">{{outlet}}</div>
        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="users">
    <div class="list">
        <ul>
            {{#each controller}}
            <li>{{#linkTo 'user' this}}{{name}}{{/linkTo}}</li>
            {{else}}
            <li>no users yet...</li>
            {{/each}}
        </ul>
    </div>
    <div class="detail">{{outlet}}</div>
</script>

<script type="text/x-handlebars" data-template-name="user">
    {{#if isEditing}}
    <p>name: {{view Ember.TextField valueBinding="name"}}</p>
    <p>email: {{view Ember.TextField valueBinding="email"}}</p>
    <button type="button" {{action finishEdit}}>Save</button>
    {{else}}
    <button type="button" {{action edit}}>Edit</button>
    {{/if}}
    <p>name: {{name}}</p>
    <p>email: {{email}}</p>
</script>

CSS

body {
    width: 100%;
    height: 100%;    
}
ul, li {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
    padding: 5px;
}
.wrapper {
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 300px;
}
.sidebar {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 50px;
    border: 1px solid #ccc;
}
.main {
    position: absolute;
    left: 50px;
    top: 0;
    right: 0;
    bottom: 0;
}
.toolbar {
    border: 1px solid #ccc;
}
.content {
    position: relative;
}

.content .list {
    border: 1px solid #eee;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50px;
}
.content .list ul li a {
    text-decoration: none;
    color: blue;
}
.content .list ul li a.active {
    color: red;
    background: #eee;
}
.content .detail {
    position: absolute;
    left: 60px;
    top: 0;
}

JavaScript

App = Ember.Application.create();

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

App.User = DS.Model.extend({
    name: DS.attr('string'),
    email: DS.attr('string')
});

App.User.FIXTURES = [
    { id: 1, name: 'user1', email: '[email protected]' },
    { id: 2, name: 'user2', email: '[email protected]' },
    { id: 3, name: 'user3', email: '[email protected]' },
    { id: 4, name: 'user4', email: '[email protected]' },
    { id: 5, name: 'user5', email: '[email protected]' }
];

App.Router.map(function() {
    this.resource('users', function() {
        this.resource('user', { path: ':user_id' });
    });
});

App.UsersController = Ember.ArrayController.extend({

});

App.UserController = Ember.ObjectController.extend({
    isEditing: false,
    
    edit: function() {
        this.set('isEditing', true);
    },
    finishEdit: function() {
        this.set('isEditing', false);
        //this.get('model.transaction').commit();
    }
});

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

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