Question

我正在使用ember版本1.6.1。如果用户没有正确输入用户名和密码，我想显示一条错误消息。我想我必须使用bind-style。现在我有这样的代码：

  <fieldset class="error-message" {{bind-style visibility="isVisible:visible:hidden"}}>
          <span>invalid username/password</span>
   </fieldset>

最好的方法是什么？

Answer 1

Ember Handlebars支持动态类绑定，而不是样式绑定。要做到这一点，你需要绑定到类。 http://emberjs.com/guides/templates/binding-element-class-names/

的CSS

.visible{
  visibility:visible;
}

.hidden{
  visibility:hidden;
}

车把

<fieldset {{bind-attr class=":error-message isVisible:visible:hidden"}}>
      <span>invalid username/password</span>
</fieldset>

示例：http://emberjs.jsbin.com/didax/1/edit

您可以bind-attr样式属性并创建一个返回原始样式文本visibility:visible的计算属性，但这很难看，在这种情况下不是必需的。

Answer 2

虽然class通常是设置这些可视更改的最佳方法，但请考虑使用classNameBindings而不是bind-attr。这需要您创建一个View类。

但是，绑定没有特定绑定机制的元素属性的最佳方法是通过attributeBindings：

（这种方法还需要View类）

App.IndexView = Ember.View.extend({
  attributeBindings: ['style'],
  style: function() {
    return 'color: #F00';
  }.property()
});

这样做有点好，因为您可以查看视图类的style属性，它会自动绑定到您的视图标记。由于这是一个计算属性，您可以创建自己的代码来确定视图中其他属性的更改，这些更改可能导致重建样式属性，并再次自动绑定到您的视图。

您可以拥有style属性使用property('dependency')监视的属性，因此当它更改时，将再次计算style并更新视图。例如，假设您有一个视图，它是一个带有内置验证的自定义输入框。您有一个属性valid，其返回boolean，有效true，无效值为false。

App.IndexView = Ember.View.extend({
  attributeBindings: ['style'],
  valid: function() {
     return false;
  }.property(),
  style: function() {
     // these variables and all should ideally be somewhere else,
     // as color codes could potentially be global for the app
     var _invalidColor = "#F00";
     var _validColor= "#000";
     if (this.get('valid')) {
         return 'color: ' + _validColor + ';';
     } else {
         return 'color: ' + _invalidColor + ';';
     }
  }.property('valid')
});

（见jsbin）

请记住，这是一个显示功能/可能性的粗略示例。手动更改JS Bin中valid的{{1}}属性的返回值，以查看它对视图模板的影响。

ember版本1.6.1最好以绑定css样式的方式

2 个答案:

的CSS

车把