Ember.js createRecord

by dmazza

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div class='container' id='application'>
    <header>
        <h1>Create New Person</h1>
    </header>
    
    <article>
        {{outlet}}
    </article>
</div>
    
</script>

<script type="text/x-handlebars" data-template-name="person_create">
    {{view Ember.TextField valueBinding="content.firstName"}}
    {{view Ember.TextField valueBinding="content.firstName"}}
    <a {{action submitForm target="App.PersonCreateView"}}>Save New Person</a>
    
    {{content.firstName}}
</script>

CSS

body { color: #5F5050; margin: 2em 1em;  }

h1 { margin: 0 0 0.2em 0; }

p { margin: 0.5em 0; }

a {
    cursor: pointer;
    text-decoration: underline;
}

.container {
}

.flash {
    border: double 3px #5fa;
    padding: 0.5em 1em;
}

.warning {
    border: double 3px #f00;
}

.debug {
    color: #555;
    font-size: 0.8em;
}

#footer {
    margin-top: 6em;
    text-align: right;
}

#footer a { color: #825;  }

JavaScript

App = Ember.Application.create();

/*
 * Routing
 */
App.Router = Ember.Router.extend({

    enableLogging: true,
    
    root: Ember.Route.extend({
        route: '/',
        create: Ember.Route.extend({
            route: 'create',
            connectOutlets: function(router, person) {
                router.get("applicationController").connectOutlet("personCreate");
            }
        })
    })
});

/* Application Controller */
App.ApplicationController = Ember.Controller.extend({

    
});

App.PeopleController = Ember.ArrayController.extend({
    
});

App.PersonCreateController = Ember.ObjectController.extend({
    //content: App.Person.createRecord({}), 
    create: function(model) {
        //App.PeopleController.
    }
});

App.Person = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string')
});

App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

/* Navigation */
App.PersonCreateView = Ember.View.extend({
    templateName: 'person_create',
    submitForm: function(event) {
        controller = this.get('controller');
        content = this.get('content');
        controller.create(content)
    }
});


App.initialize();