javascript - EmberJS 触发子组件对父组件的操作

Question

我正在尝试创建一个下拉菜单组件。它包含 2 个组件 - currency-dropdown (parent), dropdown-item (child)。我能够渲染组件。但是当我点击 dropdown-item 组件时，我无法触发对父组件的操作。

我正在尝试将选定的组件数据发送到父组件。我尝试设置 targetObject 和我在这里找到的许多其他组合。我不确定是什么问题。我确实在父组件中扩展了 _yield，因为我在 each 助手中渲染子组件。一些帮助将不胜感激。 Here is what I've got so far.

App.CurrencyDropdownComponent = Ember.Component.extend({
    actions: {
        itemSelected: function(item) {
            console.log(item);
        }
    },
    _yield: function(content, options) {
        var get = Ember.get,
        view = options.data.view,
        parentView = this._parentView,
        template = get(this, 'template');
        if (template) {
            view.appendChild(Ember.View, {
                isVirtual: true,
                tagName: '',
                _contextView: parentView,
                template: template,
                context: get(view, 'content'),
                controller: get(parentView, 'controller'),
                templateData: { keywords: parentView.cloneKeywords() }
            });
        }
    }
});

App.DropdownItemComponent = Ember.Component.extend({
    click: function() {
        this.sendAction('selectItem', this.origContext);
    }
});

<script type="text/x-handlebars" id="index">
  <header>
    {{#currency-dropdown currencies=model}}
      {{#dropdown-item targetObject=view selectItem="itemSelected"}}
        <span class="cdd-selected-tick">&#10004;</span>
        <span class="font-13">{{name}}</span>
        <span class="push-right font-11">{{symbol}}</span>
      {{/dropdown-item}}
    {{/currency-dropdown}}
  </header>
</script>

<script type="text/x-handlebars" id="components/currency-dropdown">
  <div class="cdd-box">
    <input class="cdd-input" type="hidden"/>
    <div class="cdd-selected-box" {{action "toggleDropDown"}}>
      <strong>Currency</strong>
      <span class="uppercase"> {{currencies.0.currencyCode}} </span> 
      {{currencies.0.symbol}}
      <div class="down-arrow"></div>
    </div>
    <ul class="cdd-selection-box" >
      {{#each item in currencies}}
         <li>{{yield}}</li>
      {{/each}}
    </ul>
  </div>
</script>

For anyone interested I have made my solution an addon.

Answer 1

所以我找到了一种方法来做到这一点，但我认为这可能有点 hack。你的问题是，就上下文而言，你的下拉项不应该访问你的货币下拉列表。通过使用 yield，您为下拉项提供了与货币下拉菜单相同的上下文，而不是货币下拉菜单本身的上下文。这是一个奇怪的场景，因为你有点想要两全其美，但你只能拥有一个或另一个。因此，您可以这样做，而不是发送操作:

this.get('parentView').send('itemSelected', this.origContext);

这将调用您想要的操作处理程序。只有两个警告:

1. 它将这些组件耦合在一起，使得 dropdown-item 组件可能无法重复使用。
2. dropdown-item 组件总是会调用操作，而不仅仅是在父组件订阅它时。

此外，我不知道您的整个用例，但我认为您可能正在尝试使该组件也可重用。我个人根本不会使用 yield，而是将下拉项的 HTML 硬编码到下拉组件类中。对您的应用程序特定的某些内容进行硬编码会降低其在应用程序外部的可重用性，但会使其在应用程序内部更容易使用(这显然更重要)。在使用解决方法之前，您可能需要重新审视一下您是如何使用这些组件的。从长远来看，像这样的变通办法总是会反咬我一口。