EmberJs 将函数的返回字符串添加为类名

EmberJs add the return string of a function as a class name

本文关键字：添加 字符串 返回 函数 EmberJs      更新时间：2023-09-26

基本上，我有一个EmberJS应用程序。在其中，我想显示不同的验证状态，为此，我想更新 html 类属性。这些表单元素中的每一个都可以有三个不同的名称："（空）、"有成功"或"有错误"。

基本上，我想将类名绑定到一个计算属性中，该属性将根据表单的状态返回这三个中的任何一个（很像 AngularJS ng 类）。

我想要这样的东西：

validationState: function() {
  if(element.state === "pristine") {
     return "";
  } 
  else if(element.state === "valid") {
     return "has-success";
  }
  else{
     return "has-error";
  }
}

在模板中，我想要这样的东西：

<input class="{{ validationState }} form-control">

这可行吗？如果是，最好的方法是什么？创建自定义帮助程序？还是已经有办法这样做了？

使用 bind-attr 帮助程序，并使 validationState 成为计算属性。这看起来像这样

{{input value=inputValue class=validationState}}
App.IndexController = Em.ArrayController.extend({
  inputValue: 'test',
  validationState: function() {
    if(this.get('inputValue')) {
      return 'valid';
    }
    return 'empty';
  }.property('inputValue')
});

这是一个工作示例。

相关文章：