Using action in view with emberjs

Question

I am going to use action when I click submit or button with emberjs.

This is template

<script type="text/x-handlebars" id="login">
  <form class="form-horizontal" id="loginForm"  >
    {{view App.Views.TextField id="username"}}
    {{view App.Views.TextField id="password"}}
    <input type="submit" value="Login" {{action login this}} />
  </form>
</script>

This is the view.js

App.Views.login = Ember.View.create({
  templateName: 'login',
  controllerBinding: 'App.Controllers.login',
  username: '',
  password: '',
  login: function(){
    alert("this is view.js");
  }
});

This is the controller.js

App.Controllers.login = Ember.Object.create({
  login: function(event){
    alert("This is controller.js");
  }
});

But I cannot see any alert message. I'd like to see both of the message.

Answer 1

The short

What you are trying to do should be done somewhat different using more ember.js naming conventions. For a working example see here.

The long

Your template, notice that I've changed App.Views.TextField to simply input which is basically a textfield, Ember.TextField. I've also added type="password" to make the password field act like one. The valueBinding statement ensures that when ever a value is changed the same named properties on your controller will also change due to data binding.

<script type="text/x-handlebars" id="login">
  <form class="form-horizontal" id="loginForm"  >
    {{input id="username" valueBinding="username"}}
    {{input type="password" id="password" valueBinding="password"}}
    <button class="btn btn-success" {{action login}}>Login</button>
  </form>
</script>

Generally if you have a template called login ember will create a LoginView and a LoginController for you automatically. Only if you need to put logic in your controller or view you should create one yourself, so ember will use it instead of creating one. So, since you shouldn't put logic in your view other than some rendering related stuff it can be also completely omitted in your case, ember will instantiate a basic view for you. In the case you want to use your own view than this is how it should be defined:

App.LoginView = Ember.View.extend();

The only important thing to take into account here is that if you want a view to be used automatically with a specific template than conventional naming is everything. For example if you have a template called myAwesomePanel ember.js expects a view called MyAwesomePanelView under the App namespace. ember.js will do a lookup for App.MyAwesomePanelView and if it finds one corresponding to the template name it will use it and instantiate it automatically, thus the call to extend rather than create. Basically the convention is as follows: App.<YourCamelCasedTemplateName>View

Your controller, this time we create one because we want here indeed some logic. Notice the call to extend rather than create ember will also instantiate it for you automatically.

App.LoginController = Ember.ObjectController.extend({
  username: '',
  password: '',
  login: function(){
    alert("User: "+this.get('username')+" Pass: "+this.get('password'));
  }
});

Hope this helps.