Ember Latest
The latest build of Ember.
HTML
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="https://s3.amazonaws.com/builds.emberjs.com/ember-data-latest.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.1/jquery.mockjax.js"></script>
<script type="text/x-handlebars" data-template-name='index'>
<p>Parent: {{name}}</p>
<div>
{{#each child in children}}
<p> {{child.name}} {{child.id}}</p>
{{/each}}
{{#if lastChildIsActive}}
<p>Last Child is Active!</p>
{{/if}}
</div>
</script>
CSS
h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
label { padding: 15px; font-size: 1.4em; color: green; }
JavaScript
App = Ember.Application.create({});
App.ApplicationAdapter = DS.ActiveModelAdapter;
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('parent', 1);
}
});
App.IndexController = Ember.ObjectController.extend({
});
App.IndexView = Ember.View.extend({
didInsertElement: function() {
controller = this.get('controller');
controller.get('model').get('children').then(function(children){
active = children.get('lastObject').get('active');
controller.set('lastChildIsActive', active);
});
}
});
App.Parent = DS.Model.extend({
name: DS.attr('string'),
children: DS.hasMany('child', { async: true })
});
App.Child = DS.Model.extend({
name: DS.attr('string'),
active: DS.attr('boolean')
});
$.mockjax({
url: '/parents/1',
response: function(settings) {
var json = {
parent: { id: 1, name: 'Parent', child_ids: [1, 2, 3] }
};
settings.success(json);
}
});
$.mockjax({
url: '/children',
response: function(settings) {
var json = {
children: [
{id: 1, name: 'Child One', active: false },
{id: 2, name: 'Child Two', active: false },
{id: 3, name: 'Child Three', active: true }
]
};
settings.success(json);
}
});