プロパティ間のバインディングを追加する

コンポーネントの動作を動的に変更するには、2つのコンポーネントのプロパティ間にバインディングを作成します。プロパティのバインディングを作成するには、プロパティに、目的の値を返すJavaScript式を割り当てます。 内部的には、バインディング式に含まれる変数が監視されています。変更が検出されると、バインディング式が再評価され、新しい結果がプロパティに適用されます。

最も単純な場合、バインディングは別のプロパティへの参照となります。たとえば、コンポーネントの高さをその親コンポーネントの高さにバインドすることで、親コンポーネントの高さが変更されたときに、コンポーネントの高さが自動的に調整されるようにすることができます。

プロパティバインディングの使用方法の詳細については、「プロパティバインディング」を参照してください。

コンポーネント間でバインディングを作成するには、[Connections ] > [Bindings] に移動します。

コンポーネントのプロパティ間のバインディングを作成する

あるコンポーネントのプロパティを別のコンポーネントのプロパティにバインドするには：

1. 2D ビューに 2 つのコンポーネントを配置します。

   

2. 最初のコンポーネントに「viewBox」という名前を付けます。
3. 2番目のコンポーネントに「connectBox」という名前を付けます。
4. viewBoxコンポーネントに、太い黒の Border と青い Color を適用します。
5. connectBoxコンポーネントを選択します。
6. 「Connections 」ビューから「Bindings 」を選択します。
7. バインディングエディタで、 （Add ）ボタンを選択して、現在選択されているコンポーネントにバインディングを追加します。

   

   バインディングエディタ。

8. 「From 」で、親コンポーネントとして「viewBox」を選択します。次に、その「border.color 」プロパティを選択します。
9. To では、connectBoxコンポーネントがすでにターゲットコンポーネントとして選択されています。下のドロップダウンからcolor を選択して、影響を受けるプロパティを設定します。
10. viewBoxコンポーネントのborder.color が、connectBoxコンポーネントのcolor に適用されます。

    

すべてのバインディングには、コード内に自動生成された JavaScript 式が含まれています。詳細については、「バインディングの設定」を参照してください。

プロパティバインディングの作成例については、「状態を使用してコンポーネントのプロパティ値を変更する」を参照してください。

論理演算子の概要

式内で以下の論理演算子を使用することで、複数の条件を 1 つの式に組み合わせることができます:

また、チェックの前に算術演算子を使用して数値を比較することもできます。ただし、可能な限りこの目的のために個別のプロパティを作成することをお勧めします。