I am currently trying to enhance the functionality of an Ember component. The specific component I am working on is located here:
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"
}}
I am experimenting with the parameter 'fnActionButtonClicked'. This parameter references a function that is executed, but it is not integrated within the component's functionality (like passing a JavaScript function as a parameter). As someone new to Ember, I am uncertain about the best approach to handle this. The template for the component can be found here:
app / templates / components / 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>
Within the template, you will find an input type="button" connected to "actionButtonClicked" at the end. The controller for the component is located here:
app / components / 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
}
}
});
As seen, the parameter in the template 'fnActionButtonClicked' (sayHello) will be accessed in actionButtonClicked() via var action = this.get('fnActionButtonClicked');.
This brings me to my question. Since I cannot pass a JavaScript function as a parameter of a template (or at least, I believe it's not the recommended approach), I have created a controller named 'sampleController' to define the action 'sayHello' (as specified by the fnActionButtonClicked value) using the following code:
app / controllers / sample-controller.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions:{
sayHello(){
console.log("I'm saying hello this time");
}
}
});
How can I, from app / components / echo-hlabel-tf.js:actionButtonClicked(), execute the code in app / controllers / sample-controller.js : sayHello()? Is there a way to access another controller from the component controller? Am I taking the right approach in Ember to achieve my objective?
Thank you in advance.