從組件內調用一個餘燼組件動作

Question

我正在創建一個組件來包裝select2選擇框。代碼如下：

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'); 
}, 

}); 

然而

，我所堅持的是如何發送我在上（「變」）事件的行動已經得到了數據：我已經定義的變化，或者如果我可以在on（「change」）事件中設置selectedValue屬性

「this」不是「//發送到更改」行的組件 - 如何/在哪裏獲得對組件本身在這一點上？

基本上就是我想實現的是傳遞給的選擇2「變」事件的數據進入我的selectedValue屬性

感謝

Answer 1

試試這個：

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 2

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

Answer 3

您可以使用Component.send('actionName')。

我發現它在Ember's documentation。

Answer 4

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

檢查http://emberjs.com/api/classes/Ember.Component.html#property_actions - 'actions'簡直就是您的組件的其它屬性。

Answer 5

this上下文將不參考FixedSelectComponent上下文$.each，並且還使用發送方法，該方法將調用FixedSelectComponent改變方法..

參閱：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 6

例與組分和計算屬性：

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    callFromComputedProperty: Ember.computed(function() { 
    return this.send('myAction'); 
    }), 

    actions: { 
    myAction() { 
     return 'It Works'; 
    }, 

    callFromAction() { 
     this.send('myAction'); 
    } 
    } 
})