如何在 Ember 组件中动态切换输入文本的 disabled=true/false？答案

【问题标题】：How to dynamically switch disabled=true/false of an input text inside Ember Component?如何在 Ember 组件中动态切换输入文本的 disabled=true/false？
【发布时间】：2017-04-21 17:55:08
【问题描述】：

我有一个想要动态禁用/启用的 Ember 组件。最初我有：

//template.emblem
= input type="text" disabled=true placeholder="Account Number" class="form-control"

当我有disabled=false 时，它会再次启用该按钮。现在我想让它动态化。我想创建一个简单的函数，在 component.js 内部返回 true 或 false：

//component.js
export default Ember.Component.extend({
  ...
    disableButton(){
    return true
  },

//template.emblem
  = input type="text" disabled=disableButton placeholder="Account Number" class="form-control"

这将禁用它。但是，当我将disableButton 切换到return false 时，它仍然处于禁用状态。

如何将disabled 连接到component.js 内的函数/属性？

template.emblem 和 component.js 文件夹层次结构是：

components
  |-my-awesome-component
    |- template.emblem
    |- component.js

【问题讨论】：

标签： ember.js

【解决方案1】：

在您的 component.js 上设置一个属性并将其绑定到模板中输入标记上的“已禁用”。然后您可以使用您的按钮调用该操作，并使用 this.set() 将属性设置为 true 或 false。

//component.js
import Ember from 'ember';

export default Ember.Component.extend({
  disableButton: false,

  actions: {
    disableButton(){
      this.set('disableButton', true);
    }
  }
});

//template.hbs
<button {{action 'disableButton'}}>Click me</button>

{{input type="text" placeholder="Account Number" class="form-control" disabled=disableButton}}

【讨论】：

注意：您也可以使用this.toggleProperty('disableButton');切换属性
我非常同意toggleProperty，因为它允许您使用相同的按钮禁用/启用输入。这也是 ember 处理 ember 对象内部布尔值的方式。
如果你打算在真假之间“切换”，toggleProperty 是最好的。但如果您只想让按钮“禁用”该字段，请将值设置为 true。