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

i'm working on first ember.js app, , though have template loading, when attempt invoke action i've defined in controller, i'm getting error: "uncaught error: nothing handled event 'shownew'." i'm not sure if i've set route , controller incorrectly, or if i'm missing 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 move action router, so, works, based on documentation looks should able in 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 missing something, i'm not sure what.

i guess shownew event not firing on controller because have stories.index template should hook correspondent controller should storiesindexcontroller:

seanchai.storiesindexcontroller = ember.arraycontroller.extend({       shownew: function() {     this.set('isnewvisible', true);   } }); 

hope helps