CODEWITHSUNDEEP
ember.js
saalon
saalon

Reputation: 3634

Ember.js Action error: "Nothing handled the event"

I'm working on my first Ember.js app, and though I have a template loading, when I attempt to invoke an action that I've defined in the controller, I'm getting an error: "Uncaught Error: Nothing handled the event 'showNew'." I'm not sure if I've set up the route and controller incorrectly, or if I'm missing something else.

./router.js:

Seanchai.Router.map(function(){
  this.resource("stories", function(){
    this.route('new');
  });
});

Seanchai.StoriesRoute = Ember.Route.extend({
  model: function(){
    Seanchai.Story.find();
  }
});


Seanchai.Router.reopen({
  location: 'history'
});

./controllers/stories_controller.js:

Seanchai.StoriesController = Ember.ArrayController.extend({    

  showNew: function() {
    this.set('isNewVisible', true);
  }
});

./templates/stories/index.hbs:

<table>
  <thead>
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  </thead>
  <tbody>
    {{#each stories}}
      {{view Seanchai.ShowStoryView storyBinding="this"}}
    {{/each}}
    {{#if isNewVisible}}
      <tr>
        <td>*</td>
        <td>
          Test
        </td>
      </tr>
    {{/if}}
    </tbody>
</table>
<div class="commands">
  <a href="#" {{action showNew}}>New Story</a>
</div>

If I move the action into a router, like so, it works, but based on the documentation it looks like I should be able to do this in the controller.

updated ./router.js:

Seanchai.Router.map(function(){
  this.resource("stories", function(){
    this.route('new');
  });
});

Seanchai.StoriesRoute = Ember.Route.extend({
  model: function(){
    Seanchai.Story.find();
  },
  events: {
    showNew: function() {
      this.set('isNewVisible', true);
    }
  }
});


Seanchai.Router.reopen({
  location: 'history'
});

I'm obviously missing something, but I'm not sure what.

Upvotes: 2

Views: 5319

Answers (2)

intuitivepixel
intuitivepixel

Reputation: 23322

I guess your showNew event is not firing on the controller because you have a stories.index template so you should hook into the correspondent controller which should be a StoriesIndexController:

Seanchai.StoriesIndexController = Ember.ArrayController.extend({    
  showNew: function() {
    this.set('isNewVisible', true);
  }
});

Hope it helps

Upvotes: 3

Daniel
Daniel

Reputation: 18682

I think it should be:

Ember.ObjectController.extend({    

  showNew: function() {
    this.set('isNewVisible', true);
  }

});

instead of:

Ember.ArrayController.extend({    

  showNew: function() {
    this.set('isNewVisible', true);
  }
});

This guide might be helpful - Ember.js - Templates.

Upvotes: 0

Related Questions