[英]Bubble up events from ember component
I've created a component which renders html text and handles click events. 我创建了一个呈现html文本并处理点击事件的组件。
Ember Components are not bubbling up events but I would like to let clicks on links bubble up to the window and let the browser handle it. Ember Components并没有冒泡活动,但我想让点击链接冒泡到窗口,让浏览器处理它。
Code tells more than 1000 words :-) 代码告诉超过1000字:-)
HTML 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>
Coffee 咖啡
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 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; }
Fiddle: http://jsfiddle.net/ujrZL/ 小提琴: http : //jsfiddle.net/ujrZL/
When you create a component set the action name of the action that should be propogated using sendAction. 创建组件时,设置应使用sendAction传播的操作的操作名称。
{{test-a internalAction='myAction'}}
{{test-a internalAction='myAction2'}}
And from inside the component 并从组件内部
this.sendAction('internalAction');
http://emberjs.jsbin.com/oPAtORO/2/edit http://emberjs.jsbin.com/oPAtORO/2/edit
I'm using a workaround which might be the only way currently. 我正在使用一种可能是当前唯一方法的解决方法。 I don't like it because it smells a bit for me.
我不喜欢它,因为它对我来说有点味道。
CoffeeScript CoffeeScript的
actions: ->
edit: ->
window.open event.toElement.href, '_blank'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.