javascript - EmberJs 添加函数的返回字符串作为类名

Question

基本上，我有一个 EmberJS 应用程序。在其中，我想显示不同的验证状态，为此，我想更新 html 类属性。这些表单元素中的每一个都可以有三个不同的名称:""(空)、"has-success"或"has-error"。

基本上，我想将类名绑定(bind)到一个计算属性上，该属性将根据表单的状态返回这三个属性中的任何一个(很像 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">

这可行吗？如果是，最好的方法是什么？创建自定义助手？或者已经有办法做到这一点？

Answer 1

使用 bind-attr helper 并制作 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')
});

Here is a working example.