2013-05-11 42 views
14

我正在更新個人項目,其中使用了ember.js 0.9.x版本。我們如何才能在餘燼的行動中獲得原始事件

因此,新版本發佈了,並且我遇到了一個與ember操作相關的問題。

我有以下的html代碼:

<li><a href="#" id="startApp" {{action activateView target="view"}}> Home</a> <span class="divider">|</span></li> 

哪裏,當我點擊它調用這個函數activateView:

activateView: function(event, context) { 
    console.log(event);    
} 

但該事件和上下文是不確定的。我已經嘗試過this.context,它返回undefined。

其主要思想是當用戶點擊時獲取鏈接的id。

我知道路線和車把助手鍊接,但我真的需要一個ID爲其他的事情,

你能幫助我嗎?

謝謝

回答

7

使用操作幫助程序不會傳遞事件。如果你真的想事件對象,你需要定義一個視圖,並使用click事件:

App.MyLink = Em.View.extend({ 
    click: function(e) { 
    } 
}); 

然後:

<li>{{view App.MyLink}}</li> 

,但需要訪問DOM事件是一種罕見的情況下,由於您可以將參數傳遞給{{action}}。你的情況:

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li> 

和事件:

activateView: function(id) { 
    console.log(id);    
} 
+0

謝謝你的幫助。嘗試解決這個問題需要幾個小時,最終解決方案非常簡單。 – 2013-05-12 10:48:39

+0

不客氣,很高興它的工作! – 2013-05-12 13:15:24

+5

還有一個事件不僅僅是DOM元素。我明白,不要在動作中訪問事件,或者如果我真的需要設置自己的自定義處理程序,這是更好的做法。但是有沒有一些後門可以訪問這個活動?基本上沒有人真正回答OP的問題。 – 2014-02-28 15:49:06

2

需要ID傳遞給你的函數,像這樣把它在視圖訪問,你可以沿着你想要什麼都通,但在你的例子這應該這樣做

HTML

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li> 

那麼你可以訪問你傳遞的ID或什麼都,在視圖

JS

... 
activateView: function(data){ 
    console.log(data); // should be the ID "startApp" 
} 
... 
+0

謝謝你的幫助。嘗試解決這個問題需要幾個小時,最終解決方案非常簡單。 – 2013-05-12 10:48:21

+0

歡迎:) – intuitivepixel 2013-05-12 10:50:22

11

在餘燼2 ...

裏面你的行動,你總是有機會獲得具有DOM元素的Javascript event對象,例如

actions: { 
    myAction() { 
     console.log(event.target) // prints the DOM node reference 
    } 
} 
+0

非常感謝這個 – agent47 2017-01-18 00:31:57

+4

對我來說,這似乎並不適用於Firefox。我收到一個錯誤,指出:'ReferenceError:event is not defined'。 例如:https://jsfiddle.net/6fra6cL4/ – 2017-03-01 22:58:02

+0

這是在Ember文檔中的任何地方提及的嗎?我似乎無法找到它。 – 2017-05-12 14:23:33

0

有兩種方法可以收到行動event對象,

1.如果您使用的組件,那麼你可以定義任何事件的這個名單中組件中的名稱以及旨在接收本機事件對象的名稱。例如,{{my-button model=model}}

export default Ember.Component.extend({ 
click(event){ 
    //oncliking on this componen will trigger this function 
    return true; //to bubble this event up 
} 
}) 

2.如果您使用的是像按鈕HTML標記,那麼你需要指定一個(封閉)的行動內聯事件處理程序。

{{#each item as |model|}} 
     <button onclick={{action 'toggle' model}}>{{model.title}}</button> 
{{/each}} 

在動作哈希切換函數將始終接收本機瀏覽器事件對象作爲最後一個參數。

actions:{ 
toggle(model,event){ 

} 
} 

在下面的格式,操作切換不會收到event對象,

  • <button {{action 'toggle'}}>{{model.title}}</button>
  • 輸入助手如{{input key-press="toggle"{{text-area key-press="toggle"

在灰燼導https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions解釋真的很好

相關問題