person + identity

each person has an identity display a list of persons with data from person and identity display a person's page with data from person and identity

by Emmanuel Mie

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Tests</h1>
    <hr />
    {{#linkTo "persons"}}Personnes{{/linkTo}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="person">
    <h2>One Person</h2>
    {{log this}}
    {{log content}}
    <strong>id : </strong>{{content.id}}<br />
    <strong>birth : </strong>{{content.birth}}<br />
    <strong>firstname : </strong>{{identity.firstname}}<br />
    <strong>lastname : </strong>{{identity.lastname}}<br />
</script>

<script type="text/x-handlebars" data-template-name="persons">
    <table>
        <tr>
            <th>id</th>
            <th>firstname</th>
            <th>lastname</th>
            <th>birth</th>
        </tr>
        {{#each model itemController="PersonItem"}}
        {{log content}}
        <tr>
            <td>{{#linkTo "person" content}}{{content.id}}{{/linkTo}}</td>
            <td>{{identity.firstname}}</td>
            <td>{{identity.lastname}}</td>
            <td>{{content.birth}}</td>
        </tr>
        
        {{/each}}
    </table>
</script>

CSS

strong {
    display: inline-block;
    width: 10em;
}

JavaScript

var App = Ember.Application.create();

App.Router.map(function() {
    this.route('person', { path: '/person/:person_id' });
    this.route('persons');
});

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

App.PersonRoute = Ember.Route.extend({
    model: function() {
        return App.Person.create();
    }
});

App.PersonIndexRoute = Ember.Route.extend({
    model: function(params) {
        return App.Person.find(params.id);
    }
});

App.PersonsRoute = Ember.Route.extend({
    model: function() {
        return App.Person.findAll();
    }
});

// *********************************************
// * Controllers
// *********************************************

App.PersonItemController = Ember.Controller.extend({
    identity: null,
    
    init: function() {
        this.set('identity', App.Identity.find(this.get('content.id')));
    }    
});

// App.PersonsController = Ember.Controller.extend();

App.PersonController = Ember.Controller.extend({
    identity: null,

    loadIdentity: function() {
        this.set('identity', App.Identity.find(this.get('model.id')));
    }.observes('model')
});

// *********************************************
// * Models
// *********************************************
App.Person = Ember.Object.extend({
    id: null,
    birth: null
});

App.Person = App.Person.reopenClass({
    findAll: function() {
        var result = [];
        App.PersonStore.forEach(function(item) {
            result.pushObject(App.Person.create(item));
        });
        return result;
    },
    
    find: function(id) {
        var i = App.Person.create();
        App.Person.findAll().forEach(function(item) {
            if ( item.id == id ) i = item;
        });
        return i;
    }
});

App.Identity = Ember.Object.extend({
    id: null,
    person: null,
    firstname: '',
    lastname: ''
});

App.Identity = App.Identity.reopenClass({
    findAll: function() {
        var...