オブジェクトやデータの参照

Dashcombでは、内部データの参照や変更を柔軟に行うことができます。このセクションでは、オブジェクトのデータを外部から参照する方法を説明します。

Dashcomb が保持している内部データ

Dashcomb の管理画面は、柔軟な設定を行うことができるように内部データを保持しています。

内部データは、以下の種類があります。

1. 画面全体の共通データ

ユーザーのログイン状態や、グローバルな定数値として作成したオブジェクトを保持しています。

インスペクター メニューのグローバルオブジェクトから、利用できるオブジェクトを確認できます。

2. 画面上に配置されたコンポーネントのデータ

Dashcombでは、画面上に配置されたコンポーネントごとにJavaScript オブジェクトを生成し、内部データとして保持しています。

オブジェクトのプロパティには、ユーザーが入力した内容や、表示・非表示などのコンポーネントの状態が含まれています。

インスペクター メニューのコンポーネントオブジェクトから、画面上で利用できるオブジェクトを確認できます。

3. データソースから取得したデータ

外部データベースやAPI エンドポイントから取得したデータも、内部データとして保持されます。

インスペクター メニューのデータオブジェクトから、利用できるオブジェクトを確認できます。

内部データとして利用できるオブジェクトは、インスペクター メニューに表示されます。

{{}} 構文

Dashcomb の管理画面では、設定内容にJavaScript の式を含むことができます。その際、JavaScript の式は {{}} で囲む必要があります。

{{}} で囲まれた部分はJavaScriptの式として評価され、その値がDashcombの機能の中で利用されます。

以下は、{{}} の構文を利用する例です。

1. 2つのInput コンポーネント( input1, input2 )の入力値の合計を表示する

{{}} で囲んだ部分はJavaScript の式として評価されるので、演算子を用いることができます。

{{ input1.value + input2.value }}

2. ログイン中のユーザー名のあとに、敬称 をつける

{{}} で囲まれた部分のみがJavaScript の式として評価され、それ以外の部分は文字列として扱われます。

{{ currentUser.name }} さん

3. セレクトボックスで選択されたオプションの値の合計値を求める

{{}} で囲むことで、値を返す関数を利用することもできます。

たとえば、複数選択可能なSelect コンポーネントで選択されたオプションの合計を、reduce() を用いて求めることができます。

// select1.value = [100, 200, 300] の場合

{{ select1.value.reduce((sum, price) => sum + price) }}
// -> 600

{{}} を入れ子にして使うことはできません。

また、{{}} に文を入れることはできません。