[英]specify target action to a ember component
I have a component that is wrapping content defined by another template. 我有一个包装另一个模板定义的内容的组件。 I want an action on the template to trigger a method in my surrounding component.
我想要对模板进行操作以触发周围组件中的方法。 Is this possible?
这可能吗?
Here is what I have for my template. 这是我准备的模板。 Note this is shortened for brevity.
请注意,为简洁起见,此处将其缩短。
{{#drop-down}}
<div class="menu-selector clickable" {{action "toggleDropdown"}}>
</div>
{{/drop-down}}
This is my component: 这是我的组件:
DropDownComponent = Ember.Component.extend
showDropdown: false
actions:
toggleDropdown: ->
@toggleProperty 'showDropdown'
`export default DropDownComponent`
I can verify that everything else in my component is working. 我可以验证组件中的其他所有内容是否正常运行。 If I put the action in my component that loads this template, it works fine.
如果我将动作放在加载此模板的组件中,则效果很好。 But that's not where I want it.
但这不是我想要的。
So you would like to send an action to particular components. 因此,您想向特定组件发送操作。 Take a notice that
注意
A component is a custom HTML tag whose behavior you implement using JavaScript and whose appearance you describe using Handlebars templates.
组件是一个自定义HTML标记,您可以使用JavaScript来实现其行为,并使用Handlebars模板来描述其外观。 They allow you to create reusable controls that can simplify your application's templates.
它们使您可以创建可重用的控件 ,以简化应用程序的模板。
and 和
An Ember.Component is a view that is completely isolated.
Ember.Component是一个完全隔离的视图。
You are probably using wrong tool here. 您可能在这里使用了错误的工具。 You should use instead custom view.
您应该改用自定义视图。
App.DropdownView = Ember.View.extend
showDropdown: false
elemendId: 'dropdown'
actions:
toggleDropdown: ->
@toggleProperty 'showDropdown'
return;
{{#view 'dropdown'}}
<div>
<div class="menu-selector clickable" {{action "toggleDropdown"}}>
</div>
{{/view}}
Then you can send an action to view by 然后,您可以发送操作以查看
Ember.View.views.dropdown.send('toggleDropdown');
Demo: http://jsbin.com/zoqiluluco/1/ 演示: http : //jsbin.com/zoqiluluco/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.