Ember: отправить действие дочернего компонента на родительский компонент - PullRequest
Новая
       34

Ember: отправить действие дочернего компонента на родительский компонент

0 голосов
/ 16 ноября 2018

Я пытаюсь вызвать / вызвать действие дочернего компонента от родителя. Я пробовал это несколькими способами, но я никуда не денусь. Это в основном то, что я имею до сих пор.
Я пытаюсь отправить действие родителю, передав его в качестве параметра в действии, которое было передано ...
Это похоже на ситуацию со спагетти, но то, как организован мой проект, это мой результат.

Если кто-нибудь может, скажите, пожалуйста, как успешно передать действие родителю в качестве параметра. (Мне любопытно узнать как, если возможно)
Если у кого-то также есть лучшее предложение о том, как назвать действия ребенка, пожалуйста, поделитесь. Заранее спасибо!

родитель-component.hbs 

{{child-component anAction=(action "anAction")}}
<div onclick={{action actionPassedFromChild}}></div>

родитель-component.js 

actionPassedFromChild: null,
....
actions: {
    parentAction(childAction){
       this.set('actionPassedFromChild', childAction);
    }
}


ребенок-component.hbs 

<div onclick={{action "anAction"}}

ребенок-component.js 

....
actions: {
    anAction(){
       this.parentAction(childAction);
    }
    childAction(){
       //Some operation
    }
}

В этом примере, если я остановлю код внутри 'anAction', у меня будет 'childAction'. Но к тому времени, когда оно передается в parentAction, оно не определено. Кто-нибудь может объяснить, почему?

1 Ответ

0 голосов
/ 16 ноября 2018

Кажется, у вас есть некоторые опечатки. Например, parentAction не передается дочернему компоненту. Но если я понял, чего ты хочешь добиться правильно - это выполнимо, однако я даже не представляю, зачем тебе это нужно.

Вы можете поиграть с моим примером здесь . Выбор находится в дочернем компоненте, а кнопка находится в родительском компоненте. Когда вы выбираете что-то в select - дочерний компонент отправляет одну из двух функций родительскому компоненту. А когда вы нажимаете кнопку - родительский компонент вызывает эту функцию.

Код: 

//child-component.js
import Ember from 'ember';


export default Ember.Component.extend({
  line1: "Say Hi!",
  line2: "Say Yeah!",

  changeAction(newAction) {
    switch (newAction) {
      case "1":
        this.onActionChange(this.action1);
        break;

      case "2":
        this.onActionChange(this.action2);
        break;

      default:
        this.onActionChange(undefined);
        break;
    }
  },

  action1: Ember.computed(function(){
    const that = this;
    return function() {
      alert(that.line1);
    }
  }),

  action2: Ember.computed(function(){
    const that = this;
    return function() {
      alert(that.line2);
    }
  })
});

//child-component.hbs
<select  onchange={{action changeAction value="target.value"}}>
        <option>Choose something</option>
        <option value="1">Action 1</option>
    <option value="2">Action 2</option>
</select>

//parent-component.js
import Ember from 'ember';

export default Ember.Component.extend({
  childishAction() {
    if (typeof this.childAction === 'function') {
      this.childAction();
    }
  }
});

//parent-component.hbs
{{child-component onActionChange=(action (mut childAction))}}
<div><button disabled={{unless childAction true false}} onclick={{action childishAction}}>Let's do it!</button></div>

Что здесь происходит - вы не можете передать action помощнику что-то, что не определено, когда ember отображает шаблон. Поэтому вам нужно сохранить действие, которое дочерний компонент отправляет в некоторую переменную, и вызвать его, используя некоторое промежуточное действие родительского компонента.

В моем примере функция, возвращаемая из дочернего компонента, сохраняется в свойстве childAction родительского компонента, и childishAction родительского компонента вызывает его.

Надеюсь, это поможет. Но вы, вероятно, пытаетесь решить какую-то проблему не правильно.

...