将参数绑定到余烬组件并从控制器处理它

Question

I want to create the following component in ember (templates / components / echo-hlabel-tf.hbs)

<div id="echo-hlabel-tf">
  <span id="tf-label">{{label}}</span>
  <span id="tf-value">
    <input type="text" value={{textValue}}
    {{action "validateRegExp" textValue regExp post on="focusOut"}} 
    {{action "showText" textValue post on="mouseUp"}} 
    />
  </span>
</div>

Just a textfield and a label placed in the same row . I have created the functions in the controller of the component (components / echo-hlabel-tf.js):

import Ember from 'ember';

export default Ember.Component.extend({
actions: {
    validateRegExp(text,regExpStr){
        let regExpObj = new RegExp(regExpStr)
        if(regExpObj.test(text)){
            console.log('entry matches')
        }else{
            console.log('entry is wrong');  
        }

    },
    showText(text){
        console.log(text);
    }
}
});

I want to use this component from another template (template / programmers.hbs) :

<ul>
 {{people-list title="List of programmers" people=model}}
</ul> 
<div>
 {{echo-hlabel-tf 
    label="Textfield horizontal"
    textValue="..." 
    regExp="^([a-z0-9]{5})$"
 }}
</div>

The thing is that , even the actions are fired as the events trigger, the variable that represents the value of the input (textValue) always stands the same ("...") . seems that the binding between the outer template, and the components is created at the beginning, but if I put more letters in the textfield , the value of textValue remains the same and doesn't change . I would like to, as I'm adding letters to the textBox, print them with the console with the method showText, but I always print "..."

Answer 1

You are using pure html5 input that does not do two way binding by itself. That is even if you type something, it is not reflected to textValue attribute. You can use ember's builtin input component as in this twiddle . I believe this will solve your problem.