CODEWITHSUNDEEP
javascriptember.jshandlebars.jsdom-eventsember-data
sircamp
sircamp

Reputation: 107

How do send an event in Ember?

I have this code in my html page:

<script type="text/x-handlebars" data-template-name="logged">
    <h1>Page</h1>
          {{view.name}}
        {{#view App.LoginButton}}
          <button type="button">This is a clickable area!</button>
        {{/view}}
        
</script>

And I have this code in my js script:

App=Ember.Application.create();
App.Route= Ember.Route.extend({
  events: {
   /* turnItUp: function(level){
      alert("ee");
    }*/
  }
});

App.Router.map(function() {
    this.resource('logged', {path: '/'});
});

App.LoginButton= Ember.View.extend({
  click: function(evt) {
   this.get('controller').send('turnItUp', 11); 
  }
});
App.PlaybackController = Ember.Controller.extend({
 events:{
  turnItUp: function(level){
    alert(level);
  }
}
});

When I click on a button, I get this error:

Uncaught Error: Nothing handled the event 'turnItUp'.

WHY?

Upvotes: 0

Views: 4056

Answers (2)

Mike Grassotti
Mike Grassotti

Reputation: 19050

When I click on a button, I get this error: 

Uncaught Error: Nothing handled the event 'turnItUp'.

WHY???

Because neither the controller or the route has been setup to handle turnItUp event. Here's what's going on:

  1. User clicks the button triggering a App.LogginButton.click()
  2. click() calls get('controller') which returns a <(generated logged controller)> - probably not what you'd expect.
  3. click() sends turnItUp to <generated logged controller>
  4. <generated logged controller> has no turnItUp method so delegates to the current route
  5. There is no turnItUp event on current route or any of it's parents, so you see an error

So in future to debug this kind thing, try adding console log to make sure controller is what you think it should be:

App.LoginButton= Ember.View.extend({
  click: function(evt) {
    console.log('controller: ', this.get('controller').toString());
    this.get('controller').send('turnItUp', 11); 
  }
});

Now the other thing that needs to change is that controller events should not be nested under an events property - that's just for routes. So to make things work, try this:

App.LoggedController = Ember.Controller.extend({
  turnItUp: function(level){
    alert(level);
  }
});

Upvotes: 1

Cyril Fluck
Cyril Fluck

Reputation: 1581

What you are looking for is called an Action in ember

http://emberjs.com/guides/templates/actions/

http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_action

<button {{action turnItUp 11}}>This is a clickable area!</button>

App.PlaybackController = Ember.Controller.extend({
  turnItUp: function( value ){
    alert(value);
  }
})

(assuming that PalyBackController is the current controller of the view)

Upvotes: 0

Related Questions