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

Question

我正在尝试创建一个下拉菜单组件。它由两个组件组成- currency-dropdown (parent)，dropdown-item (child)。我可以渲染组件。但是，当我单击dropdown-item组件时，我无法触发父组件上的操作。

我试图将选定的组件数据发送到父组件。我尝试设置targetObject和我在这里找到的许多其他组合。我不知道是什么问题。当我在每个助手中呈现子组件时，我确实在父组件中扩展了_yield。如果能提供一些帮助，我将不胜感激。这是我到目前为止所得到的。

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>

对于任何感兴趣的人，我已经把我的解决方案作为一个警告。

Answer 1

所以我找到了一个方法，但我想这可能是个小问题。您的问题是，就上下文而言，您的下拉项目不应该访问您的货币下拉列表。通过使用yield，您将为下拉列表提供与货币下拉列表相同的上下文，而不是货币下拉本身的上下文。这是一个奇怪的场景，因为你想要两个世界中最好的，但你只能拥有一个或另一个。因此，您可以这样做，而不是发送一个操作：

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

它将调用所需的操作处理程序。只有两个注意事项：

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

另外，我不知道您的整个用例，但我认为您可能试图使这个组件过于可重用。我个人根本不会使用yield，而是将下拉项的HTML硬编码到下拉组件类中。硬编码一些特定于应用程序的东西可以减少应用程序之外的可重用性，但也使应用程序内部的工作变得更加容易(这显然更重要)。在使用解决方案之前，您可能需要再看看如何使用这些组件。从长远来看，像这样的解决办法总是回来咬我。