Geek Answers Handbook

How to create a login form using emberJS?

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

Does emberJS support form control and other user interface elements such as grid, list etch. I know this is the basis for development, but it does support several controls, such as the TEXTAREA text box. Check the box.

This suggests why it does not support other controls, such as the panel.

+4
source share
2 answers

Davis understood everything, but there are some improvements in his code.

  • Ember.Button deprecated. Use the button tag instead.
  • In your view, define a submit event. It will be launched when your form is submitted. No need to manually set the action on the button.
  • Your views should not have any $.ajax tags. Pass this 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:. Thinking, probably, all the logic that I insert into the controller should actually go to the router. Controllers should be used to connect models to views.

+7
source

Yesterday I created a registration form, I assume that you want to build asynchronous.

I started with this gist , the API has changed a bit since then, but 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 }, });

Steering wheels:

 <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 fully answer them (I'm relatively new to Ember.js), but I think that the main philosophy of Ember.js is mainly the architectural environment (but with a good tie -ins to Handlebars.js) rather than the architectural and user interface, like its predecessor, SproutCore .

+2
source

More articles:


All Articles