Я пытаюсь добавить некоторую внешнюю функциональность к компоненту 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 () strong >? Как я могу получить доступ от контроллера компонента к другому контроллеру? Это правильный путь к достижению моей цели?
заранее спасибо