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のプロパティを設定して、テンプレート内のinputタグの「無効」にバインドします。次に、ボタンを使用してアクションを呼び出し、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}}