2015-06-28 59 views
19

我有openModal應用程序路由上定義的操作。我試圖從組件內部調用這個動作。如何使用閉包動作在路線上調用動作?

如果我用行動冒泡語法:

{{my-component openModal="openModal"}}

然後一切正常,我可以觸發使用this.sendAction("openModal")這個動作。

但是,我不知道如何使用新的閉包語法來獲得相同的結果:

{{my-component openModal=(action "openModal")}}

在這種情況下,灰燼抱怨,有沒有在控制器上定義的動作openModal。我必須在每個使用my-component的控制器上定義此操作嗎?有沒有辦法以某種方式使用target選項來告訴Ember這個動作是在路由上定義的?在單個組件中混合冒泡和閉合語法可以嗎?

我使用灰燼2.0測試1

回答

22

直到路由組件某處引入在灰燼 2.1或2.2或2.3或2.4或2.5或2.6或 2.7,這是不可能通過從閉合動作一條路線。

現在,您只能將控制器和子組件的閉包動作傳遞給子組件。

UPD:巫女Paderes暗示的插件可用:https://github.com/dockyard/ember-route-action-helper

+3

我給予好評導致你回答了這個問題,我希望我可以降低技術實力。只有在控制器上的動作對我來說似乎很瘋狂 – mattmcmanus

+0

這只是一個半途而廢的狀態,直到可路由組件的陸地和控制器停止用於這樣的路線。 – Axle

+1

現在,雖然可路由組件不可用,但您可以使用此[addon](https://github.com/dockyard/ember-route-action-helper)。 – rmmmp

6

您可以通過控制器進行代理它們發送關閉的行動路線。這適用於任何支持關閉操作的Ember版本。唯一需要注意的是動作名稱必須與控制器和路線不同。

例如,鑑於此模板:

{{foo-component myAction=(action 'foo')}} 

你會需要你的控制器上的foo行動,這可能代理路線:

proxyFooTo: 'fooBar', 
actions: { 

    foo(context) { 
    this.send('proxyFooTo', context); 
    } 

} 

然後在路線上

actions: { 
    fooBar(context) { ... handle fooBar ... } 
} 
2

也可以避免創建控制器,或者如果有一個表達ÿ避免添加在它更多的邏輯,通過在模板中路徑指定目標屬性

http://emberjs.jsbin.com/fiwokenoyu/1/edit?html,js,output

JS

setupController(controller,model){ 
    this._super(...arguments); 
    controller.set('theRoute', this); 
}, 
actions:{ 
    openModal(data){ 
    /*...*/ 
    } 
} 

HBS

{{my-component openModalAction=(action 'openModal' target=theRoute)}} 
7

試試這個:

{{my-component openModal=(action send "openModal")}} 

...這使得利用控制器上的send方法。

我不能說我完全理解它,因爲send的第二個參數是context,但它仍然正確地將其他參數傳遞給我的行爲。我目前使用的版本是2.4.5

+2

在ember文檔中,'context'常常用來表示'其他參數'。從鏈接到「在actionName字符串後提供的任何參數將作爲參數傳遞給動作目標函數的頁面摘錄」。 – cfatt10

0

嘗試灰燼附加稱爲燼路由動作輔助,

https://github.com/dockyard/ember-route-action-helper

你可以只是action取代route-action當時「routable-組件」變得可用。

{{todo-list todos=model addTodo=(route-action "addTodo")}} 

所以上面的代碼中也有類似的效果

路線裏面,

setupController(controller,model){ 
    this._super(...arguments); 
    controller.set('theRoute', this); 
}, 
actions:{ 
    addTodo(data){ 
    /*...*/ 
    } 
} 

哈佛商學院裏面,

{{todo-list addTodo=(action 'addTodo' target=theRoute)}} 
相關問題