Javascript 余烬：修改动态类名称绑定以激活错误css

我试图更改输入文本字段的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>

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');
        }
    }
}
});

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

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

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

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');
        }
    }
}
});

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

}))

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

---

我知道其中有两个问题，但我正在努力找到最好的方法

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

---

无论如何谢谢你

你的胡闹和你的问题有什么区别？。哪一个解决了你的问题。事实上，我查看了你的代码，没有发现任何问题。事实上，两者几乎相同。一个选项，我认为是我问题的根源，是css文件中的一个坏css类（我在问题中没有显示这个。对不起）。不是输入字段的好参考，前面有.error。或者，可能我在刷新导航器中的页面和组件时遇到了一些问题，我突然解决了这些问题。我不知道。谢谢你的评论。希望有帮助；）