CODEWITHSUNDEEP
htmlember.jshandlebars.js
Mick F
Mick F

Reputation: 7439

Basic ember hello world situation

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:

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.

Upvotes: 0

Views: 104

Answers (2)

Michael Johnston
Michael Johnston

Reputation: 5320

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.

Upvotes: 0

Andy Pye
Andy Pye

Reputation: 301

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...

Upvotes: 1

Related Questions