Question

我试图更改输入文本字段的css类以反映错误。只是用红色画边框。

我创建了以下组件：

应用/模板/组件

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

和他的控制器 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');
        }
    }
}
});

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

应用/模板/ 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，它也不会添加该类。

另一方面，我研究了改变动作的可能性＆＃39; validateRegExp＆＃39;到 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');
        }
    }

}

}）;

但在这种情况下，即使我认为这是实现目标的正确方法，我也有很多疑问。如何修改组件模板和outter模板以传递参数＆＃39; textValue＆＃39;和＆＃39; regExpStr＆＃39;到余烬计算元素？这段代码何时启动？。

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

Answer 1

好的。最后，我解决了我的问题。我创造了一个用来显示结果的余烬。现在，当您没有在文本字段中输入五个字符时，它会变为红色。尽管如此，如果输入五个字符，它将变为白色。

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

非常感谢

Ember：修改dinamically classNameBindings以激活错误css

1 个答案: