Действие триггера EmberJS для родительского компонента из дочернего объекта

Question

Я пытаюсь создать компонент выпадающего меню. Он состоит из двух компонентов: currency-dropdown (parent), dropdown-item (child). Я могу отображать компоненты. Но когда я нажимаю на компонент dropdown-item, я не могу вызвать действие над родительским компонентом.

Я пытаюсь отправить выбранные данные компонентов в родительский компонент. Я попытался установить targetObject и многие другие комбинации, которые я нашел здесь. Я не уверен, в чем проблема. Я сделал расширение _yield в родительском компоненте, так как я представлял дочерние компоненты в каждом помощнике. Некоторая помощь будет высоко оценена. 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

Так что я нашел способ сделать это, но я думаю, что это может быть немного рубить. Ваша проблема заключается в том, что с точки зрения контекстов ваш раскрывающийся список не должен иметь доступ к выпадающему меню. Используя yield, вы предоставляете раскрывающийся список того же контекста, что и в раскрывающемся списке валюты, а не в контексте раскрывающегося списка валюты. Это странный сценарий, так как вы хотите получить лучшее из обоих миров, но у вас может быть только тот или другой. Итак, вместо отправки действия вы можете сделать это:

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

Это вызовет обработчик действий, который вы хотите. Есть только два оговорки:

1. Он соединяет эти компоненты вместе так, что компонент dropdown-item не может быть повторно использован.
2. Компонент dropdown-item является всегда будет вызывать действие, а не только, когда его подписывается родительский компонент.

Кроме того, я не знаю ваш весь случая использования, но я думаю, что вы, возможно, пытаетесь сделать этот компонент слишком повторно. Я лично лично не использовал бы yield, а вместо этого просто перекодировал HTML для выпадающих элементов в раскрывающийся компонентный класс. Hardcoding некоторые вещи, характерные для вашего приложения, делают его менее пригодным для повторного использования вне вашего приложения, но упрощают работу с ним внутри вашего приложения (что явно более важно). Возможно, вам захочется взглянуть на то, как вы используете эти компоненты, прежде чем использовать обходной путь. Обходные пути, подобные этим, всегда возвращаются, чтобы укусить меня в конечном итоге.