Question

我想根据用户输入更新div的类。一个需要验证的简单输入文本。我必须帮忙，但我无法理解。

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

如果在文本字段中没有任何内容，我想用红色包围该框，在使用后键入单个字符我希望它是默认的。所以，根据bootstrap 2.x我需要将div类设置为control-group error或control-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')
});

Sameple Demo

即时设置Handlebar课程

2 个答案: