Question

我有一个组件包装由另一个模板定义的内容。我想在模板上执行一个操作来触发我周围组件中的方法。这可能吗？

以下是我的模板所用内容。请注意，为简洁起见，这是缩短的。

{{#drop-down}}
    <div class="menu-selector clickable" {{action "toggleDropdown"}}>
    </div>
{{/drop-down}}

这是我的组成部分：

DropDownComponent = Ember.Component.extend

    showDropdown: false

    actions:
        toggleDropdown: ->
            @toggleProperty 'showDropdown'

`export default DropDownComponent`

我可以验证组件中的其他所有内容是否正常工作。如果我将动作放在加载此模板的组件中，它可以正常工作。但那不是我想要的地方。

Answer 1

因此，您希望向特定组件发送操作。注意

组件是一个自定义HTML标记，您使用JavaScript实现其行为，并使用Handlebars模板描述其外观。它们允许您创建可以简化应用程序模板的可重用控件。

和

Ember.Component是完全隔离的视图。

你可能在这里使用了错误的工具。您应该使用自定义视图。

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

然后你可以发送一个动作来查看

Ember.View.views.dropdown.send('toggleDropdown');

演示：http://jsbin.com/zoqiluluco/1/

为ember组件指定目标操作

1 个答案: