2016-04-21 29 views
0

我有一個嵌套組件。子組件具有用mixin變量和動作綁定的輸入域,在父組件中有按鈕動作。 (因爲父組件被視爲插件,所以沒有mixin),而按鈕操作則觸發子組件值更新到mixin變量。如何從父組件觸發子操作。如何在不使用服務的情況下將嵌套組件通信到mixin

注:詳見附演示鏈接

https://ember-twiddle.com/d8b01ba563b555fc01374f300db20c5b?openFiles=components.child-component.js%2C

回答

1

一種更簡單的方法比觸發你的孩子組分的行動將通過updated_val下來到子組件,並讓餘燼值 - 綁定做剩下的事情。如果值已更改並且您單擊更新,請從對話框組件中進行ajax調用。

例如傳遞您的updated_val下來

//application.hbs 
{{dialog-component updated_val=updated_val}} 

但你的問題是:「如何觸發對孩子組件行動」,這可能是一個辦法(見更新twiddle):

//dialog-component.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 

    actionCalled: false, 
    actions:{ 

    callChildAction() { 
     this.toggleProperty('actionCalled'); 
    }, 

    updateValue(updateVal) { 
     this.set('updated_val', updateVal); 
    } 
    } 

}); 

//dialog-component.hbs 
<div class='dialog'> 

    {{!pass your 'updateValue' action from the dialog-component to the child-component}} 
    {{ child-component actionCalled=actionCalled updateValue=(action 'updateValue')}} 

    <button {{action 'callChildAction' }}> Update </button> 

</div> 

//child-component.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 

    child_val: '', 

    actionObserver: Ember.observer('actionCalled', function(){ 
    this.send('childAction') 
    }), 

    actions:{ 

    childAction(){ 
     alert('childAction called..'); 

     // some validation and ajax call.  
     this.sendAction('updateValue', this.get('child_val'));  
    }, 
    } 

}); 

//child-component.hbs 
{{input value=child_val}} 
相關問題