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

Question

我有一个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 

Answer 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}}