Uncaught error: Nothing handled the action 'createTodo'

Question

I'm using Ember's Getting Started Guide to create a TodoMVC. Even though I've strictly followed the instructions I'm stuck at creating a new model instance.

When I enter a new todo and hit enter I get the following console output:

Uncaught Error: Nothing handled the action 'createTodo'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble. ember.min.js:18

My js/controllers/todos_controller.js looks like this:

Todos.TodosController = Ember.ArrayController.extend({
  actions: {
    createTodo: function() {
      // Get the todo title set by the "New Todo" text field
      var title = this.get('newTitle');
      if (!title.trim()) { return; }

      // Create the new Todo model
      var todo = this.store.createRecord('todo', {
        title: title,
        isCompleted: false
      });

      // Clear the "New Todo" text field
      this.set('newTitle', '');

      // Save the new model
      todo.save();
    }
  }
});

Any ideas?

UPDATE

Putting my code in JSFiddle does work: http://jsfiddle.net/narzero/7926x/5/. I don't understand why.

I'm working on a Mac OSX 10.9.1.

Answer 1

If someone is still looking for the answer. I encountered the same problem as the one described above.

I have the ember application installed by yeoman. It provides an app.js file:

var TodomvcEmber = window.TodomvcEmber = Ember.Application.create();

/* Order and include as you please. */
require('scripts/controllers/*');
require('scripts/store');
require('scripts/models/*');
require('scripts/routes/*');
require('scripts/views/*');
require('scripts/router');

noticed that in my .tmp/scripts/combined-scripts.js file the added controllers I had put in /scripts/controllers/todos_controller.js, wheren't integrated. In the app.js file, I changed the order of the require ( put the require of the controller a bit downwards )

var TodomvcEmber = window.TodomvcEmber = Ember.Application.create();

/* Order and include as you please. */
require('scripts/store');
require('scripts/models/*');
require('scripts/controllers/*');
require('scripts/routes/*');
require('scripts/views/*');
require('scripts/router');

And that did the trick for me.

Answer 2

The fact that ember fails to find the action handler signals the absence of TodosController in your app. Make sure /js/controllers/todos_controller.js is correctly referenced in your document and loaded by the browser.

Answer 3

I had the same problem, and for me it was because I didn't include todos_controller.js in the index.html correctly:

<script src='js/controllers/todos_controller.js"></script>

I didn't realized I had used ' and " to wrap the path. A quick fix:

<script src="js/controllers/todos_controller.js"></script>

Answer 4

I'm following tut on ember cli - and now had same problem... as Saarang pointed out "The fact that ember fails to find the action handler signals the absence of TodosController in your app. "

so It turned out that instead of generating 'todos controller' (plural) I did 'todo controller' - so ember couldn't find the controller with a proper name

Answer 5

I faced this similar problem and found out that Grunt (in my case) didn't actually reloaded the changes I made. Restarting Grunt helped getting rid of the error.

A brief description of what happened:

I generated the application skeleton using Yeoman and adding basic changes to the application ran

 $ grunt serve

After this I added a new controller name index_controller.js (app/scripts/controllers/index_controller.js) to my application in controllers folder named and registered an action

MyApp.IndexController = Ember.Controller.extend({
  actions: {
   viewFruit: function(fruit) {
     console.log('hang on I"m viewing: ' + fruit.name);
   }
 }

});

app/templates/index.hbs

  <div>
    <h3>Fruits</h3>
    <ul>
      {{#each MyApp.fruits}}
       <li><a {{action 'viewFruit' this}} href="#">{{name}}</a></li>
      {{/each}}
    </ul>
  </div>

Now clicking the fruit name on console prompted the error reported in the first post.

After reading @jana's answer I opened my .tmp/scripts/combined-scripts.js and found that the registered action change was not present in the combined-scripts.js.

Thus I terminated $ grunt serve and restarted it and clicking the fruit name link correctly logged the desired message to the console.