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

Handlebars で値にアクセスする

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

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

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

変数

変数エディターで定義した変数には、{{variableName}} でアクセスできます。たとえば、変数 var1 = {"a": [1,2,3]} がある場合、テンプレート {{var1.a.[0]}} は 1 と評価されます。現在のアプリケーションユーザーやユーザー専用ストレージに関する情報など、Slate の環境変数にもアクセスできます。たとえば、テンプレート {{$global.user.firstName}} を使用すると、ユーザーの名が表示されます。

クエリ

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

Copied!1
{"name": ["Ceres","Pallas"],"earthmoid": [1.59376,1.23071],"pha": [false,false],"datefirstobs": ["1830-04-18","1825-03-23"]"_response": {"hasRun": true,"message": "Unable to parse query.","success": false}}

関数

関数名を Handlebars の括弧で囲むことで、関数の戻り値にアクセスできます。たとえば、{{myFunction}} です。

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

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

ウィジェットの生の JSON タブに表示されるプロパティは次のとおりです。

Copied!1
{"allowSelection": true,"animate": true,"datasets": [{"name": "dataset1","renderer": "bar","xValues": "{{yearToObsNum.name}}","yValues": "{{yearToObsNum.numofobs}}"}],"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}}","name": "x1","position": "bottom","scale": "category"}],"yAxes": [{"gridlinesEnabled": false,"label": "Number of Observations","name": "y1","position": "left","scale": "linear"}]}

アクセスできるプロパティとできないプロパティは次のとおりです。

{{w1.allowSelection}}             (leaf property)
{{w1.animate}}                    (leaf property)
{{w1.datasets}}                   (array)
{{w1.datasets.[0]}}               (subproperty inside array)
{{w1.datasets.[0].xValues}}       (array subproperty inside array)
{{w1.datasets.[0].xValues.[0]}}   (subproperty inside array)
{{w1.labelsEnabled}}              (leaf property)
{{w1.panZoomEnabled}}             (leaf property)
{{w1.selection.indices}}          (array)
{{w1.selection.xMax}}             (leaf property)
{{w1.selection.xMin}}             (leaf property)
{{w1.selection.xValues}}          (array)
{{w1.selection.yMax}}             (leaf property)
{{w1.selection.yMin}}             (leaf property)
{{w1.selection.yValues}}          (array)
{{w1.tooltipsEnabled}}            (leaf property)
{{w1.xAxes}}                      (array)
{{w1.yAxes}}                      (array)
{{w1.yAxes.[0]}}                  (subproperty inside array)


{{w1}}                            (not accessible, not leaf)
{{w1.selection}}                  (not accessible, not leaf)

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

クエリエディター

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

Copied!1
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];  // そのプロパティにアクセスできます。

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

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

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

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

Copied!1
2
3
4
5
6
{
  "property1": "{{variable1}}",
  "property2": "Hello, my name is {{var1}}",
  "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}}"  // 括弧が2組以上あります
}

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 の値の Handlebars テンプレートが {{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
<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'>
        Learn More About Aircraft {{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 は、このチュートリアルで先ほど作成したテーブルの選択内容を読み取る関数を指します。

何も選択されていない場合、テキストウィジェットには航空機の詳細を見ると表示されます。この時点で選択すると、無効なリンクに移動します。

テーブルで行を選択すると、選択された内容の名前を反映してボタンのテキストが更新されます。ボタンを選択すると、正しい Web ページに移動します。

faa

必ずアプリケーションを保存し、右上の X を選択して閲覧モードに切り替えてください。

doc-with-map

←

PREVIOUS変数に値を保存する

NEXTHandlebar helpers

→