1

我想根据模型的特定字段是否有错误在包含模板控件的 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>

我觉得这样的事情在 Ember 中必须是可能的！

更新：

折断！发布后，我意识到我可以做一个{{#if}}。稍后将为有兴趣的人发布解决方案。很基础的东西。我希望。

更新 2：

看起来也不可能在条件中包含布尔表达式（例如 {{#if}} 或 {{#unless}} ）。但就我而言，我可以检查 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}}

不漂亮，但你会期望它工作。然而，它并没有像我预期的那样呈现。当出现电子邮件错误时，不会将 TextField 包装在 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 行块。

4

1 回答 1

0

您可以将自定义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

于 2013-07-17T03:31:49.637 回答