I'm trying to add some outter functionality to an ember component . The component is the following one :
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'm playing with parameter 'fnActionButtonClicked' . This parameter represents a function that it's executed, and it's not inside the functionality of the component ( like passing a javascript function as parameter ). I'm newbie, and I don't know exactly the ember way to do this . The template of the component is :
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>
As you can see , at the bottom of the template, there's an input type="button" that it's binded with "actionButtonClicked" . The controller of the component is :
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
}
}
});
So , The parameter of the template 'fnActionButtonClicked' (SayHello) will be retrieved in actionButtonClicked() via var action = this.get('fnActionButtonClicked'); .
So, at this point, comes the doubt . As I can't pass a javascript function as a parameter of a template (or at least, I think it's not the right way to do things ), I have created a controller 'sampleController' to create the action 'sayHello' ( See parameter fnActionButtonClicked value ) with 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 of app / controllers / sample-controller.js : sayHello() ? How can I access from component controller to another controller ? Is this the right way in ember of achieving my goal ?
Thanks in advance
Instead of sample-controller.js , you need to create controller for the specific route programmers
. so create app / controllers / programmers.js
file,
export default Ember.Controller.extend({
actions:{
sayHello(){
console.log("I'm saying hello this time");
}
}
})
and Inside the component app / components / echo-hlabel-tf.js
.
actionButtonClicked(){
console.log('Arrives to the component');
this.sendAction('fnActionButtonClicked');
}