ember.js sending actions to controllers from views

Question

I've created a typeahead view and i'm trying to send an action to the current controller to set a property. Here is my typeahead view

App.Typeahead = Ember.TextField.extend({
    dataset_name:     undefined, //The string used to identify the dataset. Used by typeahead.js to cache intelligently.
    dataset_limit:    5, //The max number of suggestions from the dataset to display for a given query. Defaults to 5.
    dataset_template: undefined, //The template used to render suggestions. Can be a string or a precompiled template. If not provided, suggestions will render as their value contained in a <p> element (i.e. <p>value</p>).
    dataset_engine:   undefined, //The template engine used to compile/render template if it is a string. Any engine can use used as long as it adheres to the expected API. Required if template is a string.
    dataset_local:    undefined, //An array of datums.
    dataset_prefetch: undefined, //Can be a URL to a JSON file containing an array of datums or, if more configurability is needed, a prefetch options object.
    dataset_remote:   undefined, //Can be a URL to fetch suggestions from when the data provided by local and prefetch is insufficient or, if more configurability is needed, a remote options object.
    ctrl_action:      undefined,

    didInsertElement: function () {
        this._super();

        var self = this;
        Ember.run.schedule('actions', this, function () {
            self.$().typeahead({
                name:     self.get('dataset_name'),
                limit:    self.get('dataset_limit'),
                template: self.get('dataset_template'),
                engine:   self.get('dataset_engine'),
                local:    self.get('dataset_local'),
                prefetch: self.get('dataset_prefetch'),
                remote:   self.get('dataset_remote')

            }).on('typeahead:selected', function (ev, datum) {
                self.selected(datum);
            });
        });
    },

    willDestroyElement: function () {
        this._super();

        this.$().typeahead('destroy');
    },

    selected: function(datum) {

        this.get('controller').send(this.get('ctrl_action'), datum);
    }
});

Here's an implementation

App.CompanyTA = App.Typeahead.extend({
    dataset_limit:    10,
    dataset_engine:   Hogan,
    dataset_template: '<p><strong>{{value}}</strong> - {{year}}</p>',
    dataset_prefetch: '../js/stubs/post_1960.json',
    ctrl_action:      'setCompanyDatum',

    selected: function (datum) {

        this._super(datum);
        this.set('value', datum.value);
    }
});

and here's my controller

App.PeopleNewController = Ember.ObjectController.extend({

    //content: Ember.Object.create(),
    firstName: '',
    lastName: '',
    city: '',
    state: '',

    ta_datum: undefined,

    actions: {
        doneEditing: function () {

          var firstName = this.get('firstName');
          if (!firstName.trim()) { return; }

          var lastName = this.get('lastName');
          if (!lastName.trim()) { return; }

          var city = this.get('city');
          if (!city.trim()) { return; }

          var state = this.get('state');
          if (!state.trim()) { return; }

          var test = this.get('ta_datum');

          // Create the new person model
          var person = this.store.createRecord('person', {
            firstName: firstName,
            lastName: lastName,
            city: city,
            state: state
          });

          // Clear the fields
          this.set('firstName', '');
          this.set('lastName', '');
          this.set('city', '');
          this.set('state', '');

          // Save the new model
          person.save();
        },

        setCompanyDatum: function(datum) {

            this.set('ta_datum', datum);
        }
      }
});

I'm expecting the setCompanyDatum controller action to be called, but it's not. Everything else is working as expected. The App.Typeahead.selected method is being called with the right action name, but it doesn't actually call the action method.

Answer 1

the controller inside your App.Typeahead points to the instance of the App.Typeahead, not the controller from the route where you are creating the view.

You should just be using sendAction

http://emberjs.jsbin.com/EduDitE/2/edit

{{view App.Typeahead}}

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  },

  actions:{
     externalAction:function(item){
     console.log('helllllo' + item); 
    }
  }
});

App.Typeahead = Ember.TextField.extend({
  internalAction: 'externalAction',

  didInsertElement: function () {
    this.sendAction('internalAction', " I'm a sent action");
    this._super();
  }
});