Bind a model to a template's controls

Question

I'm trying to bind a model to a template's control in ember with no success. First i'm trying to create the model and then bind the model to the control. I'm creating a car with the command var newCar = sapp.Car.create();. But i'm getting an error

EmberError: You should not call `create` on a model. Instead, call `store.createRecord` with the attributes you would like to set. 

My question is how can I create a model and bind it to a template's control? Below is a sample of code of how I'm trying to achieve it

e.g.

window.sapp = Ember.Application.create();
sapp.Router.map(function() {
  this.route("cars");
});
sapp.Car = DS.Model.extend({
  plateNumber: DS.attr('string'),
  color: DS.attr('string'),
  brand: DS.attr('string')
});

Controller

 sapp.CarsController = Ember.Controller.extend({
          var newCar = sapp.Car.create();
           //getting error while creating car
           //error:mberError: You should not call `create` on a model. Instead, call `store.createRecord` with the attributes you would like to set. 
    });

Template

 <script type="text/x-handlebars" data-template-name="cars">
                <h1>Add Car</h1>
                <table>
                    <tr>
                        <td>Plate Number</td>
                        <td>
                            {{ input value=newCar.plateNumber }}
                        </td>
                    </tr>
                    <tr>
                        <td>Color</td>
                        <td>
                            {{ input value=newCar.color }}
                        </td>
                    </tr>
                    <tr>
                        <td>Brand</td>
                        <td>
                            {{ input value=newCar.brand }}
                        </td>
                    </tr>
                    <tr style="text-align:right">
                        <td colspan="2">
                            <button>Add Car</button>
                        </td>
                    </tr>
                </table>
    </script>

Answer 1

First of all, you should setup your model in the routes model hook. And as the error message is stating you should use the store's createRecord function to create a new instance of your model.

sapp.CarsRoute.extend(function() {
   model: function() {
        return this.store.createRecord('car');
   }
});

This will automatically make sure the car record is setup before transitioning to the car route and set the model property on the car controller.

Then we need to change the controller to an ObjectController like this:

sapp.CarsController = Ember.ObjectController.extend({});

With object controllers, the properties are automatically bound to properties of the model. So for instance, the brand property of your Car model will be bound to the brand property of your Car controller so you can just bind fields to these properties like this in your template:

{{input value=brand }}

Hope that helps!