从组件内调用ember组件操作

Question

I am creating a component to wrap the select2 select box. The code is below:

App.FixedSelectComponent = Ember.Component.extend({
  actions: {
    change: function(value) {
      this.set('selectedValue',value);
    }
  },

didInsertElement : function(){
  this.$("#select1").select2().on("change", function(e) {
      if ($.isArray(e.val)) {
          $.each(e.val, function(index,value) {
              console.log("multiple:",value.split('>')[2].split('<')[0]);
             // send to change
          });             
      } else {
          console.log("single:",e.val.split('>')[2].split('<')[0]);  
          // send to change
      }
    });
  },

  willDestroyElement : function() {
    this.$("#select1").select2('destroy');
},

});

however, what I am stuck at is how to send the data that I've got in the on("change") event to the action:change that I've defined , or if I can set the selectedValue property itself in the on("change") event

"this" isn't the component at the "// send to change" lines - how / where do I get the reference to the component itself at this point ?

basically what I am trying to achieve is to get the data passed to the "change" event of select2 into my selectedValue property

thanks

Answer 1

You can use Component.send('actionName') .

I found it in Ember's documentation .

Answer 2

this context will not refer to FixedSelectComponent context in $.each , and also use send method which will call FixedSelectComponent change method..

refer : http://emberjs.com/api/classes/Ember.Component.html#method_send

didInsertElement : function(){
  var _this = this;
  this.$("#select1").select2().on("change", function(e) {
      if ($.isArray(e.val)) {
          $.each(e.val, function(index,value) {
              console.log("multiple:",value.split('>')[2].split('<')[0]);
             _this.send('change',value.split('>')[2].split('<')[0]); // send to change
          });             
      } else {
          console.log("single:",e.val.split('>')[2].split('<')[0]);  
          _this.send('change',e.val.split('>')[2].split('<')[0]); // send to change
      }
    });
  }

Answer 3

this.get('actions').change.call(this, value);

检查http://emberjs.com/api/classes/Ember.Component.html#property_actions - 'actions'只是Component上的另一个属性。

Answer 4

Try this:

App.FixedSelectComponent = Ember.Component.extend({
  change: function(value) {
    this.set('selectedValue',value);
  }

  didInsertElement : function(){
    var self = this;
    this.$("#select1").select2().on("change", function(e) {
      if ($.isArray(e.val)) {
         $.each(e.val, function(index,value) {
             console.log("multiple:",value.split('>')[2].split('<')[0]);
             // send to change
             self.change(value); // substitute value by whatever you want to pass
         });             
      } else {
         console.log("single:",e.val.split('>')[2].split('<')[0]);  
         // send to change
         self.change(value); // substitute value by whatever you want to pass
      }
    });
  },

  willDestroyElement : function() {
    this.$("#select1").select2('destroy');
  },
});

Answer 5

this._actions['change'].apply(this, value);