基于布尔表达式可以直接绑定Ember模板元素的类属性吗？

Question

我想在div上设置一个css类，根据模型的特定字段是否存在错误来封装模板控件。我知道我可以在控制器上创建布尔属性并设置/取消它们。但我不想这么做有很多原因。

所以我想要这样的东西：

<div {{bindAttr class="(errors.email != undefined):error"}}>
  {{view Ember.TextField placeholder="Email" valueBinding="email" required=true}}
</div>

或

<div class="{{(errors.email != undefined ? 'error' : '')}}">
  {{view Ember.TextField placeholder="Email" valueBinding="email" required=true}}
</div>

我觉得这样的事情在安博是有可能的！

更新：

抓紧！在发帖之后，我意识到我可以做一个{{#if}。稍后会为那些感兴趣的人发布解决方案。非常基本的东西。我希望如此。

更新2：

在条件(例如{{#if}或{{#除非})中也不可能有布尔表达式。但在我的例子中，我可以检查一下errors.emails是否真实

{{#if errors.email}}
  <div class="control-group error">
{{/if}}
{{view Ember.TextField placeholder="Email" valueBinding="email" required=true}}
{{#if errors.email}}
  </div>
{{/if}}

不漂亮，但你希望它能起作用。然而，它并没有像我所期望的那样呈现。当出现电子邮件错误时，div不是将TextField包装在div中，而是在TextField控件之前打开并关闭。以下是它的渲染方式：

<div class="error">
  <script id="metamorph-21-end" type="text/x-placeholder"></script>
</div>
<input class="ember-view ember-text-field" placeholder="Email" type="text" required="required">

我想我可以把TextField放在{{#if}和{{ uglier }中，但是它越来越丑了。如有任何美化的建议，将不胜感激。

我现在是这样做的：

{{#if errors.email}}
    <div class="control-group error">
        {{view Ember.TextField placeholder="Email" valueBinding="name"}}
        <span class="help-inline">{{errors.email}}</span>
    </div>
{{else}}
    {{view Ember.TextField placeholder="Email" valueBinding="email" required=true}}
    <label class="required">* required</label>
{{/if}}

它可以工作，而且在浏览器中看起来很好看。但我知道我得把它重构成更干燥的东西。不能为每个验证字段创建这8行块。

Answer 1

您可以将自定义View与classNameBindings结合使用。对于布尔属性，Ember视图将类的应用程序切换到元素。

App.MyView = Ember.View.extend({
  classNameBindings: ['hasError:error'],
  error: false,
  hasError: function() {
    return !Ember.isEmpty(this.get('error'));
  }.property('error')
});

然后你可以在车把上使用这个视图，

<script type='text/x-handlebars' data-template-name='application'>
  {{view App.MyView error=errors.email}}
</script>

如果存在模型error，将添加errors.email类。