Question

我想在包含模板控件的div上设置一个css类，具体取决于模型的特定字段是否有错误。我知道我可以在控制器上创建布尔属性并设置/取消设置它们。但出于多种原因，我不想这样做。

所以我想要这样的事情：

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

OR

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

我觉得在Ember中必须有这样的东西！

更新：

对齐！发布后，我意识到我可以做{{#if}}。将为后来感兴趣的人发布解决方案。很基本的东西。我希望。

更新2：

看起来似乎不可能在条件句中包含布尔表达式（例如{{#if}}或{{#unless}}）。但在我的情况下，我可以检查errors.emails是否 truthy ：

{{#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。以下是它的呈现方式：

<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}}和{{else}}中，但它会变得越来越丑陋。任何美化的建议都会受到赞赏。

以下是我现在的做法：

{{#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 Views将类的应用程序切换为元素。

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类。

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

1 个答案: