Basic ember hello world situation - html

Question

After completing Ember's Getting Started Tutorial, i'm trying to make my first very basic app and am already blocked :)
I just want to do a simple Hello World:
my HTML contains a text input when a user can type his name
when the user presses enter, a <div> is updated with the text: "Hello user!"
Here is my template:
<script type="text/x-handlebars" data-template-name="user">
<form role="form">
<div class="form-group">
<label for="firstname">Firstname</label>
{{input type="text" class="form-control" id="new-user" value=newFirstname action="updateMessage"}}
</div>
</form>
<div class="well" id="new-greeting">
{{newGreeting}}
</div>
</script>
And here is my controller:
Teamtools.UserController = Ember.ArrayController.extend({
newGreeting: "Empty",
actions: {
updateMessage: function () {
var firstname = this.get('newFirstname');
this.newGreeting = "Hello " + firstname;
}
}
});
When loading the page, the input field and the "Empty" message appear. Great!
But when I type a name and then enter, I'm redirected to a blank /? page. I'm sure this is very basic stuff but if I could get help to understand what's going wrong here, I would really appreciate it.
ps: it it can help an explanation, I'm more of a Ruby on Rails world usually.

Answer 1

I believe the problem is with specifying an "action" for the input element - that's the URL you want to send the form data to, so you don't need that as you don't need to make a server request. Similarly you don't need an actions hash in your controller for this.
Ember's a lot smarter than you're giving it credit for. You can set it up so that you don't need to handle when anything changes, as it'll do it automatically. What you'd need to do is something like this:
Teamtools.UserController = Ember.ArrayController.extend({
newGreeting: function () {
var firstName = this.get("newFirstName");
var greeting = "Empty";
if (firstName.length !== 0)
{
greeting = "Hello " + firstName;
}
return greeting;
}.property("newFirstName")
});
The property("newFirstName") at the end of the newGreeting method is important: it tells Ember that newGreeting can be evaluated to give a property (a computed property) which can be displayed in the view. The "newFirstName" argument tells Ember that this value should be recalculated whenever newFirstName is changed.
Disclaimer: I haven't actually tested this code, but it should be something like what you're after...

Answer 2

Return false from your action so that it doesn't percolate. The navigation to index is happening farther up the chain of Controllers/Routes that can respond to the action.