Question

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

基本上，我希望将类名绑定到计算属性上，该属性将返回这三个中的任何一个（非常类似于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帮助程序并使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将函数的返回字符串添加为类名

1 个答案: