EmberJs 添加函数的 return 字符串作为 class 名称

Question

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

基本上，我想将 class 名称绑定到计算的属性上，这将 return 这三个中的任何一个（很像 AngularJS ng-class) 取决于表单的状态。

我想要这样的东西：

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 and make the 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.

EmberJs 添加函数的 return 字符串作为 class 名称

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

javascript

ember.js