CODEWITHSUNDEEP
javascriptmodel-view-controllerember.jsember-clihandlebars.js
B. Bulpett
B. Bulpett

Reputation: 823

Ember CLI "Nothing Handled the Action"

I'm working through Ryan LaBouve's YouTube tutorial on building the TodoMVC app with Ember CLI. I'm about half way through, now adding a conditional within the template. When a (todo list) item is double-clicked, it is supposed to trigger a function editTodo that sets a property "isEditing" to true and replaces the text with an input box.

The doubleClick function is not working at all. It throws the following error in the console:

Uncaught Error: Nothing handled the action 'editTodo'. 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.

This is the relevant template section (todos.hbs):

      <section id="main">
        <ul id="todo-list">
          {{#each todo in model itemComtroller="todo"}}
            <li {{bind-attr class="todo.isCompleted:completed todo.isEditing:editing"}}>
              {{#if todo.isEditing}}
              <input class="edit">
              {{else}}
                {{input type="checkbox" class="toggle" checked=todo.isCompleted}}
                <label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label><button class="destroy"></button>
              {{/if}}
            </li>
          {{/each}}
        </ul>

        <input type="checkbox" id="toggle-all">
      </section>

Here is the controller with the "editTodo" function (todo.js):

import Ember from 'ember';

export default Ember.ObjectController.extend({
  actions: {
    editTodo: function() {
      this.set('isEditing', true);
    }
  },
  isEditing: false,
  isCompleted: function(key, value) {
    var model = this.get('model');

    if (value === undefined ) {
      return model.get('isCompleted');
    } else {
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

I've cross-referenced my code with the video and the associated Github repo and still can't find the cause of the problem. There are also related issues on SO, but I've not seen one quite like this. Obviously I am new to Ember.js and can use all the help I can get.

THANKS!

Upvotes: 1

Views: 786

Answers (1)

GJK
GJK

Reputation: 37369

It seems that you've run into a bug that was introduced in Ember 1.13.4. I'm not sure what it is, but it has to do with using an item controller and having an action in the loop. For now, you can downgrade to Ember 1.13.3 or lower to fix the issue. I will file a bug report so that this can be fixed in later versions of Ember.

Long term you won't be writing code like this. Item controllers have been completely removed in Ember 2.0, so you'll likely switch to using components for this type of situation when using Ember 2.0. For now you can practice using Ember 1.13.3.

Almost forgot:

Code that works in 1.13.3

Same code broken in 1.13.4

EDIT: Link to GitHub issue

EDIT2: It seems that some behavior has changed in Ember (possibly another bug?) between 1.12.0 and 1.13.0. For some reason the actions are no longer being caught in the item controller and instead are being sent directly to the route controller. I'm not 100% sure why that is, but as a fix you can either downgrade to Ember 1.12 or move your editTodo action to your todos controller instead.

EDIT3: Link to second Github issue

EDIT4: As suggested in the second bug ticket, you can also change the target of the action:

 <label {{action "editTodo" on="doubleClick" target="todo"}}>{{todo.title}}</label>

Upvotes: 1

Related Questions