アプリケーションの構築SlateロジックHandlebars で値にアクセスする

注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

Handlebars で値にアクセスする

Slate では、クエリ、関数、ウィジェットのテンプレートに Handlebars を使用しています。Handlebars テンプレートは {{ }} で囲まれており、ウィジェット、変数、クエリ/関数の結果など、Slate オブジェクトにアクセスできます。たとえば、ドロップダウンウィジェット w1 がある場合、テンプレート {{w1.selectedValue}} で選択された値にアクセスできます。Slate は自動的にテンプレートを評価し、評価された値に置き換えます。

Handlebars テンプレートは、ヘルパー関数を呼び出すこともできます。詳細については、ヘルパーを参照してください。

どの Slate オブジェクトを参照できますか？

変数

Variables エディタで定義された変数に {{variableName}} でアクセスできます。また、現在のアプリケーションユーザーやユーザー専用ストレージに関する情報を含む Slate 内部変数にもアクセスできます。グローバル変数もオブジェクトそのものであることに注意してください。たとえば、グローバル変数 var1 = {"a": [1,2,3]} がある場合、テンプレート {{var1.a.[0]}} は 1 に評価されます。

クエリ

クエリ結果にアクセスできます。たとえば、{{myQuery}} には SQL または HttpJson クエリの結果が含まれます。また、メタデータが含まれる隠された _response フィールドもあります。

Copied!1
2
3
4
5
6
7
{
  "name": ["Ceres","Pallas"],  // "name"は小惑星の名前を示す
  "earthmoid": [1.59376,1.23071],  // "earthmoid"は地球からの小惑星の最小距離（天文単位）を示す
  "pha": [false,false],  // "pha"は小惑星が潜在的に危険な地球接近天体（Potentially Hazardous Asteroid）であるかどうかを示す（falseは否、trueは肯定）
  "datefirstobs": ["1830-04-18","1825-03-23"],  // "datefirstobs"は小惑星が初めて観測された日付を示す
  "_response": {"hasRun": true,"message": "Unable to parse query.","success": false}  // "_response"はクエリの実行結果とエラーメッセージを返す
}

関数

ハンドルバーで関数名を囲むことにより、関数の戻り値にアクセスすることができます。たとえば、{{myFunction}}のようになります。

ウィジェットのプロパティ

特定のウィジェットプロパティにアクセスすることができます。具体的には、テンプレートはリーフプロパティ（配列とそのサブプロパティを含む）にアクセスできます。例えば、チャートウィジェットがあるとします。

これらはウィジェットの生の JSON タブに記載されているプロパティです：

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
  "allowSelection": true,  // 選択を許可
  "animate": true,  // アニメーションを有効化
  "datasets": [
    {
      "name": "dataset1",  // データセット名
      "renderer": "bar",  // レンダリングタイプ
      "xValues": "{{yearToObsNum.name}}",  // x軸の値
      "yValues": "{{yearToObsNum.numofobs}}"  // y軸の値
    }
  ],
  "labelsEnabled": false,  // ラベルを無効化
  "panZoomEnabled": false,  // パン・ズームを無効化
  "selection": {
    "indices": [],
    "xMax": null,
    "xMin": null,
    "xValues": [],
    "yMax": null,
    "yMin": null,
    "yValues": []
  },
  "tooltipsEnabled": false,  // ツールチップを無効化
  "xAxes": [
    {
      "gridlinesEnabled": false,  // グリッド線を無効化
      "label": "first observed {{w9.selectedValue}}",  // x軸のラベル
      "name": "x1",  // x軸の名前
      "position": "bottom",  // x軸の位置
      "scale": "category"  // x軸のスケール
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,  // グリッド線を無効化
      "label": "Number of Observations",  // y軸のラベル
      "name": "y1",  // y軸の名前
      "position": "left",  // y軸の位置
      "scale": "linear"  // y軸のスケール
    }
  ]
}

これらは、アクセスできるプロパティとアクセスできないプロパティです:

{{w1.allowSelection}}             (リーフプロパティ)
{{w1.animate}}                    (リーフプロパティ)
{{w1.datasets}}                   (配列)
{{w1.datasets.[0]}}               (配列内のサブプロパティ)
{{w1.datasets.[0].xValues}}       (配列内の配列サブプロパティ)
{{w1.datasets.[0].xValues.[0]}}   (配列内のサブプロパティ)
{{w1.labelsEnabled}}              (リーフプロパティ)
{{w1.panZoomEnabled}}             (リーフプロパティ)
{{w1.selection.indices}}          (配列)
{{w1.selection.xMax}}             (リーフプロパティ)
{{w1.selection.xMin}}             (リーフプロパティ)
{{w1.selection.xValues}}          (配列)
{{w1.selection.yMax}}             (リーフプロパティ)
{{w1.selection.yMin}}             (リーフプロパティ)
{{w1.selection.yValues}}          (配列)
{{w1.tooltipsEnabled}}            (リーフプロパティ)
{{w1.xAxes}}                      (配列)
{{w1.yAxes}}                      (配列)
{{w1.yAxes.[0]}}                  (配列内のサブプロパティ)


{{w1}}                            (アクセス不可、リーフでない)
{{w1.selection}}                  (アクセス不可、リーフでない)

Handlebarsはどこで使用できますか？

クエリエディター

クエリエディターのHandlebarsテンプレートは常に文字列の値に置き換えられます。テンプレートが文字列に評価されない場合、その値は最初に文字列に変換されます。これは、クエリ自体が常に文字列であるためです。例えば：

Copied!1
2
-- 以下のコードは、allNamedテーブルから特定の名前（w12.selection.xValues）に関連する列（w8.selectedValues）のデータを選択するものです。
SELECT {{column w8.selectedValues}} FROM allNamed WHERE name = {{param w12.selection.xValues}};

非文字列値は toString メソッドで変換されます。これは一般的に整数やブール値にはうまく機能しますが、より複雑なオブジェクトでは予期しない出力が得られる可能性があります。例えば、オブジェクトに対して toString を実行すると、[object Object] と評価されますが、これはおそらくユーザーが望む結果ではありません。この問題を解決するために、{{jsonStringify myObject}} のようなヘルパーを使用することができます。

ファンクションエディタ

クエリとは異なり、ファンクションエディタのHandlebarsテンプレートは常に評価された値で置き換えられます。例えば：

Copied!1
2
var a = {{query1}};  // query1はオブジェクトです
var b = a.results[0];  // そのプロパティにアクセスすることができます。

ヘルパー関数は Functionsエディタで使用することはできません、Slateオブジェクトを直接参照する必要があります。また、変数やプロパティ値を設定することはできません。なぜなら、関数の外部で状態を変更することはできないからです。例えば：

Copied!1
2
var c = {{jsonStringify query1}}; //無効 - ヘルパーを使用できません
{{var1}} = [1,2,3];  // 無効 - グローバル変数を設定できません

ウィジェットのプロパティエディタ

アプリケーションが編集モードのとき、ウィジェットのプロパティエディタでハンドルバーを使用できます。ウィジェットでは、ハンドルバーズテンプレートは常に二重引用符 "" で囲む必要があります。なぜなら、波括弧は JSON の構文として有効ではないからです。

Copied!1
2
3
4
5
6
{
  "property1": "{{variable1}}",  // "property1"というキーに"{{variable1}}"という値が設定されています
  "property2": "Hello, my name is {{var1}}",  // "property2"というキーに"Hello, my name is {{var1}}"という値が設定されています
  "property3": [1, 2, "{{var3}}"],  // "property3"というキーに[1, 2, "{{var3}}"]という配列が設定されています
  "property4": {{variable1}}  //無効: JSONのパースエラー
}

一般的に、ウィジェット内のテンプレートは文字列に置き換えられます。評価された値が文字列でない場合、Slate はその値に対して toString を実行します。ただし、いくつかの例外があります。以下の条件がすべて満たされている場合、Slate はテンプレートを評価された値に直接置き換えます。

中括弧 {{}} が1組だけあるそして
中括弧の外に他の文字（スペースを含む）がない。

いくつかの例を見てみましょう。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
{
  // 値の置換例
  "property1": "{{var1}}",
  "property2": "{{ var1 }}",  // ハンドルバー内に空白があります
  "property3": "{{ add 2 (add 1 var1) }}",  // ヘルパー、ネスト可能です
  "property4": ["{{var1}}", "{{w1.property.[0]}"],

  // 文字列の置換例
  "property5": "Hello {{var1}}!",
  "property6": " {{var1}} ",  // 括弧の外に空白があります
  "property7": "{{#if 0}}3{{else}}4{{/if}}"  // 複数の括弧セットがあります
}

Handlebars を使用できない場所は？

変数エディタで Handlebars を使用することはできません。
スタイルエディタで Handlebars を使用することはできません。
アプリケーションのビューモードでは Handlebars を使用することはできません。ウィジェットやテキストフィールドに Handlebars を入力しても、式は評価されず、置換されません。

チュートリアル：ウィジェットをリンクする

次のチュートリアルでは、特定のフライトの航空機についてもっと知りたいというユーザーに対して、ボタンを作成してそのオプションを提供する方法を学びます。これには、2つのウィジェット間のリンクを作成する必要があります。

ウィジェットをリンクするには、ウィジェットの名前とリンクしたいプロパティを知っている必要があります。今回のケースでは、元のテーブルで選択された行の tail_num 値を取得したいのですが、テーブルの選択を flight_id を主キーとして使用するように設定しました。

このような場合には、別のヘルパー関数を使用するのが理想的です。選択されたテーブル行の行値を取得するというのは一般的なパターンなので、この機能を実装するために関数を使用することができます。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function getRowData(s){
    var returnObj = {};
    var index = data[selectionColumn].indexOf(s);

    // この処理はオブジェクトdataの各配列を反復処理します
    // valueは実際の配列で、keyはその配列のキーです
    _.forOwn(data, function(value, key){
        returnObj[key] = value[index];
    });

    return returnObj;
}

// テーブルに与えられるのと同じデータ
var data = {{f_data}};

// テーブルの現在の選択
var selection = {{w_mainTable.selectedRowKeys}};

// テーブルの主キーとして設定された列
var selectionColumn = {{w_mainTable.selectionIdentityColumnId}}

var rowData = _.map(selection, getRowData);

return rowData;

上記のコードに新しい関数 f_selectedRowValues を追加します。 var data のHandlebarテンプレートの値を {{q_allFlights}} に、 selectionColumn と selection の変数を w_flightTable を指すように変更します。

selectedRowKeys が何であるかを理解するために、テーブルウィジェットのコードを見直してください。我々は "selectionIdentityColumnId" を "flight_id" に設定しました。これは、行 flight_id が特定の行のユニークキーとして使用されることを意味します。ユーザーがテーブルの行を選択すると、そのユニークキー（フライトID番号）が selectedRowKeys に追加されます。

selectedRowKeys は、ユーザーの操作によってのみ変更可能なテーブルウィジェットのプロパティです。ウィジェットを編集するときには、JSONエディターの下部にユーザー操作プロパティの読み取り専用値を見ることができます。

これで、テーブルで テスト を選択して、関数の動作を確認することができます。

選択関数を設定したので、テキストウィジェットを追加し、それを w_linkingButton と名付けてテーブルの上に移動させます。ウィジェットのプロパティエディターで、コンテンツ の下の HTML タブに切り替えて、次の内容を入力します：

Copied!1
2
3
4
5
6
7
8
<a
     class = 'pt-button pt-intent-primary pt-icon-document-open'
     target = '_blank'
     href = 'https://registry.faa.gov/AircraftInquiry/Search/NNumberResult?nNumberTxt={{f_selectedRowValues.[0].tail_num}}'
     role='button'>
     <!-- このボタンをクリックすると、選択された航空機に関する詳細情報が表示されます -->
        航空機 {{f_selectedRowValues.[0].tail_num}} についてもっと知る
</a>

上記のコードには 2 つの機能があります。「pt-button」を追加すると、ウィジェットがボタンの外観になり、「pt-intent-primary」を追加すると、背景が青くなります。また、「pt-icon-document-open」を追加すると、ボタンに Blueprint アイコンが追加されます。アイコンの全リストは Blueprint のドキュメントから確認できます。

次に、ベース URL にユーザー入力を追加してリンクを作成し、表示テキストを設定します。

また、ウィジェットを右寄せにするためのスタイリングのスニペットを追加することができます。

sl-text {text-align: right}

テキストとリンクの両方は、上記で設定した選択機能「{{f_selectedRowValues.[0].tail_num}}」に依存しています。「f_selectedRowValues」は、このチュートリアルの前半で作成したテーブル選択から読み取る機能を指します。

何も選択されていない場合、テキストウィジェットには Learn More About Aircraft と表示されます。この状態で選択すると、リンク切れになります。

テーブルの行を選択すると、ボタンのテキストが選択した名前に更新され、ボタンを選択すると正しいWebページにアクセスできます。

faa

アプリケーションを保存し、右上の X を選択してビューモードに戻ってください。

doc-with-map