ember.js - 即时设置 Handlebar 类

Question

我想div根据用户输入更新 a 的类。需要验证的简单输入文本。我必须和一个帮手一起去，但我想不通。

<div class="{{validationClass}}">   
    <p>{{input type="text" id="titleInput" value=title placeholder="Title"}}</p>
</div>

当文本字段中没有写入任何内容时，我想用红色包围该框，在使用的输入单个字符后，我希望它成为默认值。因此，根据 bootstrap 2.x，我需要将 div 类设置为control-group errororcontrol-group success等​​。

我从未创建过助手，所以我很挣扎，我不知道如何调用它以及如何返回要替换的所需字符串{{validationClass}}

谢谢。

Answer 1

您可以使用bind-attr助手。

这是一个示例：

<script type="text/x-handlebars" data-template-name="index">
  <div {{bind-attr class=":control-group validationClass"}}>   
    <p>{{input type="text" id="titleInput" value=title placeholder="Title"}}</p>
  </div>
</script>

App.IndexController = Ember.ObjectController.extend({
    title: null,
    validationClass: function() {
        var title = this.get('title');
        return title ? 'success' :  'error';
    }.property('title')
});

http://jsfiddle.net/marciojunior/6Kgty/

Answer 2

使用{{bind-attr}}助手

{{!hbs}}
 <div {{bind-attr class=":control-group isError:error"}}>
  {{input type="text" class="form-control" value=testVal}}
 </div>

//Controller
App.ApplicationController = Em.Controller.extend({
  testVal: '',
  isError: Em.computed.empty('testVal')
});

相同的演示