2017-04-21 9 views
0

私は、動的に無効化/有効化したいEmberコンポーネントがあります。当初、私は持っていた:Emberコンポーネント内の入力テキストのdisabled = true/falseを動的に切り替える方法は?

//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" 

これは、それを無効にします。ただし、disableButtonreturn falseに切り替えると、無効になります。

disabledcomponent.js内の機能/プロパティに接続するにはどうすればよいですか?

template.emblemとフォルダ階層をcomponent.jsは次のとおりです。

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

答えて

0

はあなた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}} 
+0

注:また 'this.toggleProperty( 'disableButton')でプロパティを切り替えることができます;' – BrandonW

+0

私は非常に[toggleProperty](https://www.emberjs.com/api/classesに同意するだろう/Ember.Component.html#method_toggleProperty)、同じボタンで入力を無効/有効にすることができます。またこれは、エバーオブジェクトの内部のブール値を扱うエバーの方法です。 –

+0

trueとfalseの間で "切り替え"を行う場合は、togglePropertyが最適です。しかし、ボタンでフィールドを「無効にする」だけの場合は、値をtrueに設定します。 – BrandonW

関連する問題