0

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 "..."

2
  • You have on='focusOut' in your code. Did you try keyDown/keyUp/keyPress, that would change value after each key. Apr 26, 2017 at 2:49
  • I'll give a try this afternoon . Thanks in advance
    – Yago
    Apr 26, 2017 at 7:59

1 Answer 1

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.

2
  • Wow ... playing with twiddle , seems that it will solve my problems . Lately I'll check because now I'm in another environment , though . On the other hand, I didn't know 'ember twiddle' . It would be easier for everybody to present the problem this way . Thanks @alptugd for the answer , and for discovering to me ember twiddle .
    – Yago
    Apr 26, 2017 at 9:51
  • twiddle is great for trials; I would highly recommend it.
    – feanor07
    Apr 26, 2017 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.