With the new Ember Router introduced in pre4 I thought I’d update this answer a bit. Here’s what’s worked for me (Warning: CoffeeScript):

App.Router.map ->
    @resource "posts", ->
        @route "new"

App.PostsNewRoute = Ember.Route.extend
    setupController: (controller, model) ->
        controller.set 'content', {}

App.PostsNewController = Ember.ObjectController.extend
    submitForm: (event) ->
        App.Post.createRecord @content
        @transitionToRoute 'posts.index'

App.PostsNewView = Ember.View.extend
    controller: 'App.PostsNewController'

My template looks something like this:

    
      
        
          
            
              {{_ "Post"}}
              {{_ "Post Title"}}
              {{view Ember.TextField valueBinding="postTitle"}}
              
            
          
        
      
      
        
          {{_ "Save"}}
          {{#linkTo "posts.index" class="btn"}}{{_ "Cancel"}}{{/linkTo}}
        
      
    

I’d love to hear comments on my approach.

I propose something along this lines, see http://jsfiddle.net/pangratz666/bb2wc/:

Handlebars:

People

        
        
            {{outlet}}
        
        



    

{{#each person in controller}}
• {{person.firstName}} {{person.lastName}}

{{/each}}

    Create New Person
    
    {{outlet}}



    First name: {{view Ember.TextField valueBinding="firstName"}} 

    Last name: {{view Ember.TextField valueBinding="lastName"}} 

    Save
    Cancel
    

Current values: {{firstName}} {{lastName}}

?JavaScript:

App = Ember.Application.create();

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

// Note: these properties are expected to be dasherized
App.Person.FIXTURES = [
    {
    "id": 1,
    "first_name": "Joe",
    "last_name": "Smith"},
{
    "id": 2,
    "first_name": "James",
    "last_name": "Dolan"},
{
    "id": 3,
    "first_name": "Jim",
    "last_name": "Carry"}
];

App.Store = DS.Store.extend({
    revision: 4,
    adapter: DS.FixtureAdapter.create()
});

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

    enableLogging: true,

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router, people) {
                // set the content to all available persons
                router.get('peopleController').set('content', App.Person.find());
                router.get("applicationController").connectOutlet("people");
            },
            index: Ember.Route.extend({
                route: '/'
            }),
            create: Ember.Route.extend({
                route: '/create',
                connectOutlets: function(router, person) {
                    // set/clear the content for the personCreateController
                    router.get('personCreateController').set('content', {});
                    router.get("peopleController").connectOutlet("personCreate");
                },

                // as proposed in https://github.com/emberjs/ember.js/pull/1139
                exit: function(router) {
                    // called when we navigate away from this route: remove
                    // the connected outlet, which is the createPerson view
                    router.get('peopleController').set('view', null);
                },

                submitForm: function(router, event) {
                    // get the content of the personCreateController
                    var hash = router.getPath('personCreateController.content');
                    // create a new person
                    App.Person.createRecord(hash);
                    // navigate back to the index route
                    router.transitionTo('index');
                },

                // cancel button pressed
                cancel: Ember.Route.transitionTo('index')
            }),

            // show the "dialog" for creating a new person
            newPerson: Ember.Route.transitionTo('create')
        })
    })
});

App.ApplicationController = Ember.Controller.extend();
App.PeopleController = Ember.ArrayController.extend();
App.PersonCreateController = Ember.ObjectController.extend();

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

App.initialize();?