Ember createRecord
HTML
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div class='container' id='application'>
<header>
<h1>People</h1>
</header>
<article>
{{outlet}}
</article>
</div>
</script>
<script type="text/x-handlebars" data-template-name="people">
<ul>
{{#each person in controller}}
<li>{{person.firstName}} {{person.lastName}}</li>
{{/each}}
</ul>
<a {{action newPerson href="true"}}>Create New Person</a>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="person_create">
{{view Ember.TextField valueBinding="firstName"}}
{{view Ember.TextField valueBinding="lastName"}}
<a {{action submitForm target="App.PersonCreateView" href="true"}}>Save New Person</a>
<h3>
{{firstName}} {{lastName}}
</h3>
</script>
JavaScript
App = Ember.Application.create();
App.Person = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string')
});
App.Person.FIXTURES = [
{
"id": 1,
"firstName": "Joe",
"lastName": "Smith"
}, {
"id": 2,
"firstName": "James",
"lastName": "Dolan"
}, {
"id": 3,
"firstName": "Jim",
"lastName": "Carry"
}
];
App.Store = DS.Store.extend({
revision: 4,
adapter: DS.fixtureAdapter
});
/*
* Routing
*/
App.Router = Ember.Router.extend({
enableLogging: true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
newPerson: Ember.State.transitionTo('create'),
connectOutlets: function(router, people) {
router.get("applicationController").connectOutlet("people");
}
}),
create: Ember.Route.extend({
route: '/create',
connectOutlets: function(router, person) {
router.get("peopleController").connectOutlet("personCreate");
}
})
})
});
App.ApplicationController = Ember.Controller.extend({
});
App.PeopleController = Ember.ArrayController.extend({
content: App.Person.find()
});
App.PersonCreateController = Ember.ObjectController.extend({
content: App.Person.createRecord({}),
create: function(model) {
App.Store.commit();
}
});
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.PeopleView = Ember.View.extend({
templateName: 'people'
});
App.PersonCreateView = Ember.View.extend({
templateName: 'person_create',
submitForm: function(event) {
controller = this.get('controller');
content = this.get('content');
controller.create(content)
}
});
App.initialize();