this.content is not updating with values from template

I have the following template

  <script type="text/x-handlebars" id="friends/new">
    <label>First Name</label>
    {{input value=firstName}}<br />

    <label>Last Name</label>
    {{input value=lastName}}<br />

    <label>About</label>

    {{textarea value=about}}<br />
    <button {{action "create"}} {{bind-attr disabled=isInvalid}}>Create</button>
  </script>

I put data into all the fields and click the create button, which goes to the following controllers

App.FriendsNewRoute = Ember.Route.extend({
    model: function(){
        return { firstName: "", lastName: "", about: ""}
    }
});
App.FriendsNewController = Ember.Controller.extend({
    needs: "friends",
    isInvalid: true,

    validForm: function(){

        if(this.get('lastName') && this.get('firstName')){
            this.set("isInvalid", false);
        } else {
            this.set("isInvalid", true);
        }

    }.observes('firstName','lastName'),

    actions: {
        create: function(){

            var newFriend = Ember.copy(this.content);

            console.log(newFriend);
        }
    }
});

When calling this.get('lastName') ect the content that i have inputted into the text boxes is correct. But when i log this.content, the value is still the inital value that i set in the FriendsNewRoute. What do i need to do so that this.content will correctly update with the current data in my template?