2016-07-07 14 views
5

APIから入ってくるアイテムのリストがあり、常に同じではないので、配列内のアイテムの数は常に変化しています。私は各項目のチェックボックスを作成しています。Aureliaでチェックを外してチェックすると機能を呼び出す方法

ユーザーは、各項目をチェック/チェック解除することができます。

  1. 項目をチェックすると、それは配列
  2. 項目がチェックされていないにそのアイテムのIDをプッシュしますが、それは配列からそのアイテムのIDを削除します:ここで私が何をしたいです

私はそれがチェックされたかどうかに基づいて何かを呼び出すだけでいいです。私は "checked.delegate"と "checked.trigger"を試してみました。私はそれを働かせるようには見えません。

通常のclick.delegateは機能しません。私はそれが真か偽かどうかを常に知ることができず、どの項目が起こっているのかわからないため、すべての変数を設定できませんAPIから入ってくる。助言がありますか?

答えて

11

は次のようにchange.delegateまたはchange.trigger試してみてください。

VM方法:

logchange(value) { 
    console.log(value); 
} 

ビュー:あなたがこれを行うことができます

<input type="checkbox" change.delegate="logchange($event.target.checked)" /> 
+0

私はそれがチェックされているとき1メソッドとチェックされていないときに1メソッドを呼び出す必要があるので、これは動作しないと思う。彼らがチェックしているのか、チェックを外しているのかはどうすれば分かりますか? – James

+0

実際には動作します。素晴らしい人、ありがとう! – James

-1

一つの方法は、セッターの助けを借りています。あなたは、このようなチェックボックスを持っているとしましょう:

<input type="checkbox">

はあなたのビューモデルにプライベートフィールドを作成し、ゲッターとセッターとそれを包む:

get isChecked(){ 
    return this._isChecked; 
} 

set isChecked(value){ 
    this._isChecked = value; 
    //enter your extra logic here, no need for an event handler 
} 

private _isChecked: boolean; 

次にビューにisCheckedをバインド:

<input type="checkbox" checked.bind="isChecked">

チェックボックスがチェックされるたびまたはセッテチェックを外しますrが呼び出され、セッター内から任意のメソッドを呼び出すことができます。

これを達成するための別のより型破りな方法は、このような@bindableデコレータを使用することです:

@bindable isChecked: boolean;

あなたはおそらくisCheckedをバインド可能にしたくないので、それは型破りだがデコレータは、あなたがにアクセスすることができますisCheckedChanged方法:

isCheckedChanged(newValue, oldValue){ 
    //Logic here 
} 

そしてもちろん、あなたはでキャッチすることができchangeイベントがありますとchange.delegateしかしそれはすでに別の答えで言及されている

+0

あなたがここでやっているようなゲッター/セッターを作成することは、Aureliaでこれを行う間違いの方法です。ゲッタ/セッタを使用すると、Aureliaのバインディングエンジンがダーティチェックを使用するように切り替わります。あなた自身のAureliaアプリケーションでこれをやっているなら、私はあなたにこれをやめさせることを強くお勧めします。 –

+1

さらに重要なことに、この回答はOPの特定の質問に対しては機能しません。 OPはリピータ内で動作しているため、作業する任意の数のチェックボックスがあります。 –

関連する問題