如何将事件从Ember.js视图发送到其控制器

Question

I have a custom view in my Ember.js application. It looks like the following:

App.FocusView = Ember.TextField.extend({
  tagName: 'input',

  focusIn: function(){
    console.log("focus in...");
  },
  focusOut: function(){
    console.log(this.value);
    this.get('controller').send('getSalaryLookup', this.value);
  }
});

In my template, I render the view straight forward:

{{view App.FocusView type=number value=pitcherSalary placeholder="enter pitcher salary ..."}}

My controller code is setup to accept the getSalaryLookup action:

App.OptimalController = Ember.Controller.extend({
  actions: {
    getSalaryLookup: function(pitcherSalary){
      console.log("This never hits for some reason..");
    }
  }
});

The problem is I never see the message in my controller hit the console. I thought I was passing the event off proper, but it doesn't appear to be the case. Is there an obvious error here?

Answer 1

The controller isn't generated when you "dynamically" create a view in your template, it uses the controller that's in scope of the view (you could see this by doing {{log controller}} in the same vicinity of the {{view ...}} , which will send the controller instance to the console).

But, in this case, the naming isn't really appropriate because TextField is actually extending a component (which deep down is a view, but still, it's really a component). The way you send an action out of a component is you need to subscribe to the action when you declare it, and from the component you use sendAction instead of send .

App.FocusItComponent = Ember.TextField.extend({
  tagName: 'input',

  focusIn: function(){
    console.log("focus in...");
  },
  focusOut: function(){
    var value = this.get('value');
    this.sendAction('getSalaryLookup', value);
  }
});

Here you see I'm subscribing to the getSalaryLookup action with the action name doit . When the action is sent out of the component it will hit the controller first, if it doesn't find an action there it will hit the route, then up the route tree. http://emberjs.com/guides/templates/actions/ .

The reason you specifically subscribe is because you can 1. ignore actions you don't care about from components and 2. have multiple components in the same scope that goes to different actions.

{{focus-it type='number' value=pitcherSalary getSalaryLookup='doit' placeholder="enter pitcher salary ..."}}

Example: http://emberjs.jsbin.com/kuxilefu/1/edit

Naming for a component can be understood here: http://emberjs.com/guides/components/defining-a-component/