來自餘燼組件的冒泡事件

我已經創建了一個呈現html文本並處理點擊事件的組件。來自餘燼組件的冒泡事件

Ember Components不會冒泡事件，但我想讓點擊鏈接到窗口並讓瀏覽器處理它。

代碼告知超過1000個字:-)

HTML

<script type="text/x-handlebars" data-template-name="application"> 
     <h1>Click the link in the following div</h1> 
     {{outlet}} 
    </script> 
    <script type="text/x-handlebars" data-template-name="index"> 
     {{test-a}} 
    </script> 
    <script type="text/x-handlebars" data-template-name="components/test-a"> 
    <div class="index" {{action 'edit' on="click"}}> 
     <a href="http://www.example.com" target="_blank">Click me</a> 
    </div> 
    </script>

咖啡

App = Ember.Application.create({}); 

App.TestAComponent = Ember.Component.extend 
    actions: 
     edit: -> 
      if event.toElement.nodeName.toUpperCase() == 'A' 
       return true # should bubble to the window but is a component 
      # do something for editing here 
      alert('div clicked') 
      false

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; } 
h2 { font-size: 1.4em; } 
ul { padding: 15px; font-size: 1.4em; color: green; } 
.index { background-color: #666; padding: 20px; }

小提琴：http://jsfiddle.net/ujrZL/

來源

2013-11-04 Mike

隨着{{行動}}將無法正常工作。因爲它會執行evt.preventDefault（）。你目前的代碼是一個測試，你能分享你的意圖嗎？所以我可以在一些解決方案中思考。謝謝。 –

裏面我用這可能是目前唯一的方式解決方法。我不喜歡它，因爲它聞起來有點像我。

的CoffeeScript

actions: -> 
    edit: -> 
     window.open event.toElement.href, '_blank'

來源

2013-11-11 01:34:29 Mike

當您創建組件時，應使用sendAction設置應該傳播的操作的操作名稱。

{{test-a internalAction='myAction'}} 

{{test-a internalAction='myAction2'}}

而且從組件

this.sendAction('internalAction');

http://emberjs.jsbin.com/oPAtORO/2/edit

來源

2013-11-05 04:00:02 Kingpin2k

感謝您的回答！我已經嘗試過sendAction，它冒泡到路線，但它仍然不會冒泡到瀏覽器。我想讓瀏覽器處理所有單個屬性設置的鏈接。如果您刪除'myAction2：function（）{ alert（'action2'）; }它應該在新窗口/選項卡中打開www.example.com。 – Mike

我完全是他的，但它說這個動作沒有處理。什麼是這個業務關於返回真假？我是否必須在每次潛在冒泡行爲中都將錯誤歸還？如果我想要該行動返回其他內容呢？沒有關於此的文檔，或者很不明確 – ahnbizcad

您是否在控制器中定義了一個操作方法/模板上方的路由？ – Kingpin2k

來自餘燼組件的冒泡事件

回答

相關問題