Ember form values are undefined - ember.js

Question

I have a similar form, when I want to get submitted values in newItem controller, I get 'undefined' values. What's wrong?
<form role="form" {{ action 'add' target="newItem" on="submit"}}>
<h2>New category</h2>
<div class="form-group">
<label>Category title</label>
{{input value=title class="form-control" type="text" placeholder="Title"}}
</div>
<div class="form-group">
<label>Category description</label>
{{textarea value=description class="form-control" placeholder="Description"}}
</div>
<div class="form-group">
{{input type="submit" class="btn" }}
</div>
</form>
App.NewItemController = Ember.ObjectController.extend({
add: function(){
console.log(this.get('title')); // undefined
}
});
Update:
This form is on the ApplicationRoute:
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller, model) {
var newItem = this.controllerFor('NewItem');
controller.set('newItem', newItem);
}
});

Answer 1

You should try using Ember.TextField and Ember.TextArea:
<form role="form" {{ action 'add' target="newItem" on="submit"}}>
<h2>New category</h2>
<div class="form-group">
<label>Category title</label>
{{view Ember.TextField valueBinding="title"}}
</div>
<div class="form-group">
<label>Category description</label>
{{view Ember.TextArea valueBinding="description"}}
</div>
<div class="form-group">
{{input type="submit" class="btn" }}
</div>
</form>
The title and description values are now bound to the corresponding input fields.
Update:
I see your target is the newItem controller, so my guess is that this form is not bound to the NewItemController, thus the values are not bound to the NewItemController. A solution:
App.MyFormController = Ember.Controller.extend({
needs: ['newItem']
add: function(){
var newItemController = this.get('controllers.newItem');
newItemController.add(this.get('title'), this.get('description'));
}
});
App.NewItemController = Ember.ObjectController.extend({
add: function(title, description){
// add the new item here
}
});