Ember Load Cycle

by mehulkar

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://gist.github.com/raw/4627254/d6926174b684ce9cd605a7d27f891aeb8471d8fc/emberjs-latest.js"></script>
<script src="https://gist.github.com/raw/4627281/f2a45cfb3effb010bde33d4744ea2cbe005051de/ember-data-latest.js"></script>
<script type="text/x-handlebars">
    <h1>Application</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" ="people">
    <h2>People</h2>
	<ul>
    {{#each controller}}
        <li>
        	<div class="debug">
                Is the person record dirty: {{this.isDirty}}
            </div>
         </li>
        <li>Id: {{#linkTo person.index this}}{{id}}{{/linkTo}}</li>
        <li>Name: {{name}}</li>
        <li>Belt types:
            <ul>
    		{{#each belts}}
            	<li>{{type}}</li>
    		{{/each}}
    		</ul>
        </li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" id="person">
    <h2>Person</h2>
    {{outlet}}
</script>

<script type="text/x-handlebars" id="person/index">
     <div class="debug">
        Is the person record dirty: {{this.isDirty}}
     </div>
    Id: {{id}}<br>
    Name: <a href="#" {{action  "changeName"}}>{{name}}</a><br><br>
    
    {{#linkTo index}}Go back{{/linkTo}}
</script>



<script type="text/x-handlebars" id="finish">
    <h2>Finish</h2>
</script>

CSS

.debug{
    margin: 10px;
    padding: 10px;
    background: #d3d3d3;
}

JavaScript

// Create Ember App
App = Ember.Application.create();

// Create Ember Data Store
App.Store = DS.Store.extend({
    revision: 11,
    adapter: 'DS.FixtureAdapter'
});

// Create parent model with hasMany relationship
App.Person = DS.Model.extend({
    name: DS.attr( 'string' ),
    belts: DS.hasMany( 'App.Belt' )
    
});

// Create child model with belongsTo relationship
App.Belt = DS.Model.extend({
    type: DS.attr( 'string' ),
    parent: DS.belongsTo( 'App.Person' )
});

// Add Person fixtures
App.Person.FIXTURES = [{
    "id" : 1,
    "name" : "Trevor",
    "belts" : [1, 2, 3]
}];

// Add Belt fixtures
App.Belt.FIXTURES = [{
    "id" : 1,
    "type" : "leather"
}, {
    "id" : 2,
    "type" : "rock"
}, {
    "id" : 3,
    "type" : "party-time"
}];


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

// Set route behaviour
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Person.find();
  },
  renderTemplate: function() {
    this.render('people');
  }
});

App.PersonRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this.controllerFor('personIndex').set('content', model);
    }
});

App.PersonIndexController = Ember.ObjectController.extend();

App.PersonIndexController = Ember.ObjectController.extend({
    changeName: function() {
        this.set('name', 'Bear');
    }
});