EmberJS触发来自子组件的父组件的操作

Question

我正在尝试创建一个下拉菜单组件.它包括2个组件 - 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硬编码到下拉组件类中.对某些特定于您的应用的内容进行硬编码会降低您在应用之外的可重用性,但会让您更轻松地在应用内部工作(这显然更为重要).在使用变通方法之前,您可能需要再次了解如何使用这些组件.从长远来看,像这样的解决方法总会让我感到困惑.