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">    
    <h2>Users' example</h2>
    {{outlet}}
</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 view.isEditing}}
    <p>name: {{view Ember.TextField valueBinding="name"}}</p>
    <p>email: {{view Ember.TextField valueBinding="email"}}</p>
    <button type="button" {{action finishEdit target="view"}}>Save</button>
    {{else}}
    <button type="button" {{action edit target="view"}}>Edit</button>
    {{/if}}
    <p>name: {{name}}</p>
    <p>email: {{email}}</p>
</script>

CSS

ul, li {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
    padding: 5px;
}
.list {
    float: left;
    width: 50px;
}
.list ul li a {
    text-decoration: none;
    color: blue;
}
.list ul li a.active {
    color: red;
    background: #eee;
}
.detail {
    float: left;
    margin-left: 10px;
}

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.UserController = Ember.ObjectController.extend({
App.UserView = Ember.View.extend({
    isEditing: false,
    
    edit: function() {
        this.set('isEditing', true);
    },
    finishEdit: function() {
        this.set('isEditing', false);
        //this.get('controller.model.transaction').commit();
    }
});

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


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