javascript - Ember : Modify dinamically classNameBindings to activate error css

Question

我正在尝试更改输入文本字段的 css 类以反射(reflect)错误。只是用红色画边框。

我创建了以下组件:

应用程序/模板/组件

<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 type="text" id='input-id' class='input-class' 
                value=textValue
                focus-out = (action 'validateRegExp' textValue regExp) 
                key-up = (action 'showText' textValue)}}
</span>

和他的 Controller app/components/echo-label-tf.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNameBindings:['regExpError'],
    regExpError:false,


actions: {
    validateRegExp(text,regExpStr,event){
        let regExpObj = new RegExp(regExpStr)
        if(regExpObj.test(text)){
            alert('entry matches')
        }else{
            this.set('regExpError',true)
        }
    },
    showText(text){
        if(text == 'Santiago'){
            alert('This is your name');
        }
    }
}
});

以这种方式使用它的想法:

app/templates/programmers.hbs

<div>
   {{echo-hlabel-tf 
       id= "id-test-hlabel"
       class="class-test-hlabel-mio"
       label="Horizontal textfield"
       textValue="..." 
       regExp="^([a-z0-9]{5})$"
   }}
</div>

当文本发生变化时，我们将焦点移出输入框，它会触发事件 validateRegExp，如果文本与正则表达式不匹配，它会更改 regExpError 为真。

我想它应该更新 classNameBindings 并添加类 regExpError，但它不起作用。它不添加类，即使 regExpError 是 true 。

另一方面，我研究了将操作“validateRegExp”更改为 ember.computed 属性 的可能性。这样...

** app/components/echo-label-tf.js**

import Ember from 'ember';

export default Ember.Component.extend({
    classNameBindings:['regExpError'],

    regExpError:Ember.computed('textValue','regExpStr',function(){
    let regExpObj = new RegExp(regExpStr)
    if(!regExpObj.test(textValue)){
            return true;
    }
    return false;
   }),

  actions: {

    showText(text){
        if(text == 'Santiago'){
            alert('This is your name');
        }
    }

}

});

但在这种情况下，即使我认为这是实现我目标的正确方法，我也有很多疑虑。我如何修改组件模板和外部模板以将参数“textValue”和“regExpStr”传递给 ember 计算元素？这段代码什么时候启动？ .

我知道有两个问题合二为一，但我正试图找到最好的方法来做到这一点。

Answer 1

好的。最后，我解决了我的问题。我创建了一个 ember twiddle 来显示结果。现在，当您没有在文本字段中输入五个字符时，它会变成红色。不过，如果你输入五个字符，它就会变成白色。

https://ember-twiddle.com/72003d7484b513d3126ef11a7bc5262d?openFiles=templates.components.my-component.hbs%2Ctemplates.components.my-component.hbs

谢谢