specify target action to a ember component

Question

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.

Answer 1

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. 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.

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/