指定 Ember 组件的目标操作

specify target action to a ember component

本文关键字：目标 操作 组件 Ember 指定      更新时间：2023-09-26

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

这是我的模板。请注意，为简洁起见，缩短了此内容。

{{#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`

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

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

组件是一个自定义 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/

相关文章：