Ember.js：条件输入属性

Question

在Ember的输入助手中，我如何show/hide基于条件的属性？例如，假设我想在 isEditable 为真时显示 required="required"，否则显示 disabled="disabled"。目前我有这样的东西：

{{#if isEditable}}
    {{input value=model.name required="required"}}
{{else}}
    {{input value=model.name disabled="disabled"}}
{{/if}}

...但如果我以某种方式绑定属性会更好。

Answer 1

来自 EmberJS 网站

默认情况下，视图助手不接受数据属性。例如

{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}

{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}

呈现以下 HTML：

<a id="ember239" class="ember-view" href="#/photos">Photos</a>

<input id="ember257" class="ember-view ember-text-field" type="text" title="Name">

有两种方法可以启用对数据属性的支持。一种方法是在视图上添加属性绑定，例如Ember.LinkView 或 Ember.TextField 特定属性：

Ember.LinkView.reopen({
  attributeBindings: ['data-toggle']
});

Ember.TextField.reopen({
  attributeBindings: ['data-toggle', 'data-placement']
});

现在，上面相同的车把代码呈现以下内容 HTML：

<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown">Photos</a>

<input id="ember259" class="ember-view ember-text-field" 
       type="text" data-toggle="tooltip" data-placement="bottom" title="Name">

或者您可以重新打开视图

Ember.View.reopen({
  init: function() {
    this._super();
    var self = this;

    // bind attributes beginning with 'data-'
    Em.keys(this).forEach(function(key) {
      if (key.substr(0, 5) === 'data-') {
        self.get('attributeBindings').pushObject(key);
      }
    });
  }
});

我通常会做以下事情

<input type="checkbox" {{bind-attr disabled=isAdministrator}}>

Answer 2

{{ input type='text' required=required disabled=disabled }} 工作正常

工作示例here

有一大堆属性可以直接绑定，required 和 disabled 也在其中。参见 here

注意 @blackmind 是正确的，如果您要从头开始执行此操作，则需要做一些工作。不过幸运的是，TextSupport 已经为您完成了这些工作...:) 请参阅 here

Ember.js：条件输入属性

Ember.js: conditional input attribute

handlebars.js

ember.js

htmlbars