Ember _ Как получить доступ к действию контроллера из контроллера компонента

Я пытаюсь добавить некоторую внешнюю функциональность к компоненту ember. Компонент следующий:

app / templates / programmers.hbs

{{echo-hlabel-tf 
   id= "id-test-hlabel"
   class="class-test-hlabel-mio"
   label="Horizontal textfield"
   textValue="..."
   regExp="^([a-z0-9]{5})$"
   errorMsg="Text hasn't five characters"
   fnActionButtonClicked = "sayHello"
}}

Я играю с параметром 'fnActionButtonClicked'. Этот параметр представляет функцию, которую он выполняет, и он не входит в функциональные возможности компонента (например, передача функции javascript в качестве параметра). Я новичок, и я точно не знаю, как это сделать. Шаблон компонента:

приложение / шаблоны / компоненты / echo-hlabel-tf.hbs

<div id="echo-hlabel-tf">
    <span id="{{id}}-echo-hlabel-tf-label" 
          class="{{class}}-echo-hlabel-tf-hlabel">
    {{label}}
</span>
<span id="{{id}}-echo-hlabel-tf-value" 
      class="{{class}}-echo-hlabel-tf-value">
    {{input id='input-id' class='input-class' value=textValue
            focus-out = (action 'validateRegExp' textValue regExp) 
    }}
</span>
<span id="{{id}}-echo-hlabel-tf-error-msg" 
 class="{{class}}-echo-hlabel-tf-error-msg">
    <p id='error-msg' class="error-msg">
        {{errorMsg}}
    </p>
</span>

<div>
    <h2>Testing passing functions to the component</h2>
        <input type="button" {{action "actionButtonClicked"}}/>
</div>
</div>

Как вы можете видеть, внизу шаблона есть input type = "button", который привязан к "actionButtonClicked". Контроллер компонента:

приложение / компоненты / echo-hlabel-tf.js

import Ember from 'ember';

export default Ember.Component.extend({
   classNameBindings:['error'],
   error:false,

   actions: {
    validateRegExp(text,regExpStr,event){
        let regExpObj = new RegExp(regExpStr)
        if(regExpObj.test(text)){
            this.set('error',false);
        }else{
            this.set('error',true);
        }
    },
    actionButtonClicked(){
        console.log('Arrives to the component');
        var action = this.get('fnActionButtonClicked');
        console.log(action);
        // How can I call the function in another controller
        // With parameter fnActionButtonClicked name
    }
 }
});

Итак, параметр шаблона 'fnActionButtonClicked' (SayHello) будет получен в actionButtonClicked () через var action = this.get ('fnActionButtonClicked'); .

Итак, здесь возникает сомнение. Поскольку я не могу передать функцию javascript в качестве параметра шаблона (или, по крайней мере, я думаю, что это неправильный способ делать что-то), я создал контроллер 'sampleController' для создания действие 'sayHello' (см. значение параметра fnActionButtonClicked) со следующим кодом:

app / controllers / sample-controller.js

импортировать Ember из ember;

export default Ember.Controller.extend({
   actions:{
    sayHello(){
        console.log("I'm saying hello this time");
    }
  }

});

Как я могу из app / components / echo-hlabel-tf.js: actionButtonClicked () выполнить код app / controllers / sample-controller.js: sayHello () ? Как я могу получить доступ от контроллера компонента к другому контроллеру? Это правильный путь к достижению моей цели?

заранее спасибо


person Yago    schedule 24.05.2017    source источник


Ответы (1)


Вместо sample-controller.js нужно создать контроллер для конкретного маршрута programmers. так что создайте app / controllers / programmers.js файл,

export default Ember.Controller.extend({
  actions:{
    sayHello(){
      console.log("I'm saying hello this time");
    }
  }
})

и внутри компонента app / components / echo-hlabel-tf.js.

actionButtonClicked(){
  console.log('Arrives to the component');
  this.sendAction('fnActionButtonClicked');        
}
person Ember Freak    schedule 24.05.2017
comment
Кажется, все еще не работает. Я создал контроллер в app / controllers / programmers.js и отправил действие, как вы сказали, но я получаю ember.debug.js: 18008 Ничто не обработало действие «sayHello». Если вы обработали действие, эта ошибка может быть вызвана возвратом истины из обработчика действия в контроллере, в результате чего действие всплывет. . Кажется, не находит метода :( - person Yago; 24.05.2017
comment
Вы что, включили компонент echo-hlabel-tf.hbs в шаблон programmers.hbs? - person Ember Freak; 24.05.2017
comment
Взгляните на эту вращающуюся ссылку, которую я создал для вас. - person Ember Freak; 24.05.2017
comment
Да . Код programmers.hbs не изменился, как и первый код, который я опубликовал в этой теме. Я наблюдаю за компонентом в шаблоне, так что думаю, что с этой частью все в порядке. Мне нужно что-то импортировать? - person Yago; 24.05.2017
comment
Спасибо за вертушку. Я смотрю на это. Большое спасибо Jeje - person Yago; 24.05.2017
comment
Можете попробовать в твиддле и обновить нерабочий твиддл, это поможет нам разобраться - person Ember Freak; 24.05.2017
comment
Прости, прости, прости ... Я уверен, что ты возненавидишь меня после этого jajaja ... ты был полностью прав с самого начала. Просто я создал контроллер с именем programmer.hbs вместо programmers.hbs jejeje ... Это было действительно странно. Извините за то, что вы потеряли время, и еще раз спасибо :) - person Yago; 24.05.2017