How to create a login form using emberJS?

Question

I would like create a login form using emberjs views. Any idea which controls I can use for this.

Does emberJS supports form control and other UI controls like, grid, list etch. I know it is framework for development, however it supports few controls like textField textArea Check box.

That said, why it is not supporting other controls like panel.

Answer 1

Davis got it right, however there are a few improvements to be made to his code.

1. Ember.Button is deprecated. Instead, use a button tag.
2. In your view, define a submit event. It will get triggered when your form is submitted. No need to manually set an action on the button.
3. Your views shouldn't be doing any $.ajax stuff. Delegate that to the controller.

So, after refactoring, the code will look something like this:

App = Ember.Application.create({});

App.loginController = Ember.Object.create({
    login: function(username, password) {
      // $.ajax stuff goes here
    }
});

App.LoginFormView = Ember.View.extend({
    tagName: 'form',
    username: null,
    password: null,

    submit: function(event) {
        event.preventDefault();

        var username = this.get('username');
        var password = this.get('password');

        this.get('controller').login(username, password)
    },
});

And your template:

<script type="text/x-handlebars" data-template-name="login">
    {{#view App.LoginFormView}}
        <label>
          Username:
          {{view Ember.TextField valueBinding="view.username"}} 
        </label>
        <label>
          Password:
          {{view Ember.TextField type="password" valueBinding="view.password"}}
        </label>
        <button>Login</button>
    {{/view}}
</script>

Edit: After some thought, probably all the logic I put into the controller should actually go to the router. Controllers should be used for connecting models to views.

Answer 2

I built a login form yesterday, I assume you want to build an asynchronous one.

I started out by looking at this gist, the API has changed a bit since then however so now it looks a bit different:

JavaScript:

App = Ember.Application.create({});

App.loginController = Ember.Object.create({
    // do login stuff
});

App.LoginFormView = Ember.View.extend({
    username: null,
    password: null,

    submitLogin: function() {
        var username = this.get('login');
        var password = this.get('password');
        console.log('Login: ' + login + ' Password: ' + password);

        // do the login, probably by $.post()ing to your login page
    },
});

Handlebars:

<script type="text/x-handlebars" data-template-name="login">
    {{#view App.LoginFormView tagName="form"}}
        <label>Username:</label>
        {{view Ember.TextField valueBinding="view.username"}} 
        <label>Password:</label>
        {{view Ember.TextField type="password" valueBinding="view.password"}}
        {{#view Ember.Button target="parentView" action="submitLogin"}}Login{{/view}}
    {{/view}}
</script>

As for your other questions, I can't answer them completely (I'm relatively new to Ember.js), but I think the core philosophy of Ember.js is to mostly be an architectural framework (but with nice tie-ins to Handlebars.js), not an architectural and UI framework like its predecessor, SproutCore.