ember.js <button {{action}}></button> doesn't work properly

Question

I have http://jsfiddle.net/pF2cF/6/ code with 2 problems: 1. click "MyButton" doesn't go to clickButton function in App.indexController 2. enter in the text field will trigger MyButton click first (if #1 get solved)

Can anyone help to solve them? I do have a workaround for by using , but I'm not sure what's wrong with using.

Thanks!

The code snippets are as following, using ember.js from its master branch on 01/14/2013:

    <script type="text/x-handlebars" data-template-name="myTemplate">
        <button {{action clickButton target="App.indexController"}} >MyButton1</button>
        {{view App.MyView placeholder="Input something 1 and enter"}}
    </script>

App = Em.Application.create({
  ready: function () {
  }
});

App.Router.map(function () {
  this.route("index", { path: "/" });  //master 01142013 syntax
});
App.IndexRoute = Ember.Route.extend({
  renderTemplate: function () {
    this.render('myTemplate', {controller: 'indexController'});
  }
});

App.indexController = Ember.Controller.extend({
  clickButton: function () {
    alert("clickButton");
  }
});

App.MyView = Em.TextField.extend({
  insertNewline: function (evt) {
    alert("enter pressed");
  }
});

Answer 1

You made a number of small errors. I have put a working version on JSBin.

Stylistic issues that did not cause any failures:

• You don't need to declare any index routes.
• You don't need an empty ready method on Application. In general, put startup logic in ApplicationRoute#setupController, where you will also have access to controllers.
• You should name your template the same name as the route unless you are trying to share a single template across multiple routes. In this case, you should have just used index rather than myTemplate.

Issues related to the failures:

• Controller names should be capitalized: App.IndexController not App.indexController
• You shouldn't specify a target if the target is the current controller.
• Your render call specifies { controller: 'indexController' }. It should be { controller: 'index' }.