Aureliaコンポーネントに両親に値を返すことは可能ですか？

Question

私はAureliaを使用してアプリケーションを作成しています。そのアプリケーションの一部には、ユーザー、特にそのユーザーのアクティブな状態を示すグリッドがあります。

アクティブ状態を編集できるように、スライドボタンコントロール（iOSで見られるものと同様）を作成しました。ここでは、左にスライドすると右にスライドし、右に移動するとfalseになります。

私のやりたいことは、ユーザーグリッドでこのコントロールを使用しているため、ユーザーがカスタムスライドボタンをクリックしてユーザーを有効/無効にできるだけですが、そのコントロールを必要としますそれは後列に変更したときにそれが中に置かれています。このような

何か：。

が私のテーブルを想像してみて、この

<table> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Is Active?</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr repeat.for="user of userList"> 
     <td>${user.id}</td> 
     <td>${user.name}</td> 
     <td>${user.email}</td> 
     <td><slidebutton active="${user.active}"></slidebutton></td> 
    </tr> 
    </tbody> 
</table> 

のように見えるこれは、スライドボタンがAに設定されることをそんなにで素晴らしい作品ユーザーのアクティブなステータスに基づくデフォルト値期待される。

ただし、スライドボタンを変更した場合は、その行に何らかの通知をしたいので、バックエンドを更新してステータスを変更することができます。

私はカスタムコンポーネントEGにユーザIDを渡して反対ではないよ：

<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td> 

を私はむしろコントロールを持って電話をかける、またはそれを使用してから私を防ぐ何もしてはならないと思います他の場所、例えばトグル可能な情報の異なるアイテムを有する他のグリッド上に配置することができる。

私はイベントベースの方法を考えていましたが、ユーザーテーブルの1つを見て、500行以上のテーブルがあり、500スライドから500イベントを追跡/管理する可能性があることがわかりましたボタンは本当に私が特にやりたいと思うようなものではなかった。

値を属性に反映させる方法がある場合、これは素晴らしいスタートだと思いますが、可能な限りカスタムコントロールが直接的に基になるビューを変更することが本当に好きなのです可能であれば行のモデルを作成してください。

Answer 1

双方向データバインディングを簡単に設定できます。まず、文字列補間を使用して値を渡すのではなく、.bindの構文を使用するように切り替えてください。文字列補間を使用すると値が文字列に変換されるため、.bind構文で渡す文字の型を保持できるためです。また、オブジェクトなどのバインディングにも使用できます。

<td><slidebutton active.bind="user.active" uid.bind="user.id"></slidebutton></td> 

私たちは、上記のコード例では.two-wayに.bindを変更することができ、これは、これらのバインディングが双方向である必要があることオーレリアを教えてくれます。それはあなたが望むものを達成しますが、常にこれを実行する必要が迷惑だろう：私はuidプロパティISNを推測しているとして、私は唯一の、双方向のデータバインドされたことをactiveプロパティを設定し

<td><slidebutton active.two-way="user.active" uid.bind="user.id"></slidebutton></td> 

注意slidebuttonコントロール内で変更されていないため、2方向のデータバインディングを行う必要はありません。

しかし、これをデフォルトの双方向データバインディングに設定することができます。これを行う方法を見てみましょう。activeとuidのバインド可能なプロパティをslidebuttonカスタム要素に既に作成していることを確信しています。私は、彼らが（ESNextで）次のようになり賭けている：

@bindable active; 
@bindable uid; 

我々は、これらにコンフィギュレーションのビットを追加した場合、我々は、双方向のデータバインディングをデフォルトにこれらのプロパティを設定することができ、その後、あなたが買ってあげますデフォルトで検索する双方向データバインディング。

@bindable({ defaultBindingMode: bindingMode.twoWay }) active; 
@bindable uid; 

私は上記のbindingMode.twoWayを使用しています。この列挙型をaurelia-frameworkモジュールからインポートする必要があります。あなたはこれをやったら

import {bindable, bindingMode} from 'aurelia-framework'; 

、あなたがactive.bind="user.active"を使用し、オーレリアは、二を処理するに戻ることができます。したがって、あなたはslidebuttonのビューモデルファイルの先頭に以下の行のようなものを持っているかもしれませんあなたのための方法データバインド。