注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
Slate では、クエリ、関数、ウィジェットのテンプレートに Handlebars ↗ を使用しています。Handlebars のテンプレートは {{ と }} で囲まれ、ウィジェット、変数、クエリ/関数の結果などの Slate オブジェクトにアクセスできます。例えば、ドロップダウンウィジェット w1 がある場合、テンプレート {{w1.selectedValue}} を使用して選択された値にアクセスできます。Slate は自動的にテンプレートを評価し、評価された値に置き換えます。
Handlebars のテンプレートでは、ヘルパー関数を呼び出すこともできます。詳細は、Helpers を参照してください。
Variables エディターで定義された 変数 には {{variableName}} でアクセスできます。例えば、変数 var1 が {"a": [1,2,3]} の場合、テンプレート {{var1.a.[0]}} は 1 に評価されます。
また、現在のアプリケーションユーザーやユーザー専用ストレージに関する情報を含む Slate の 環境変数 にもアクセスできます。例えば、テンプレート {{$global.user.firstName}} を使用すると、ユーザーの名前が表示されます。
クエリの結果 にアクセスできます。例えば、{{myQuery}} は SQL または HttpJson クエリからの結果を含みます。また、一部のメタデータを含む隠し _response フィールドもあります。
Copied!1 2 3 4 5 6 7 8 9 10 11{ "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 // 成功したかどうか } }
ハンドルバーで関数名を囲むことで、関数の戻り値にアクセスできます。例えば、{{myFunction}}とします。
特定のウィジェットプロパティにアクセスできます。具体的には、テンプレートはリーフプロパティ（配列とそのサブプロパティを含む）にアクセスできます。例えば、チャートウィジェットがあると仮定します。
これらはウィジェットの raw 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": [ // x軸の設定 { "gridlinesEnabled": false, // グリッドラインを無効に "label": "first observed {{w9.selectedValue}}", // ラベルのテキスト "name": "x1", // 軸の名前 "position": "bottom", // 軸の位置 "scale": "category" // スケールのタイプ } ], "yAxes": [ // y軸の設定 { "gridlinesEnabled": false, // グリッドラインを無効に "label": "Number of Observations", // ラベルのテキスト "name": "y1", // 軸の名前 "position": "left", // 軸の位置 "scale": "linear" // スケールのタイプ } ] }
これらはユーザーがアクセスできる、またはアクセスできないプロパティです：
{{w1.allowSelection}} (リーフプロパティ) // 選択を許可する
{{w1.animate}} (リーフプロパティ) // アニメーションを行う
{{w1.datasets}} (配列) // データセットの配列
{{w1.datasets.[0]}} (配列内のサブプロパティ) // データセット配列の最初の要素
{{w1.datasets.[0].xValues}} (配列内のサブプロパティ) // 最初のデータセットのx値の配列
{{w1.datasets.[0].xValues.[0]}} (配列内のサブプロパティ) // 最初のデータセットのx値配列の最初の要素
{{w1.labelsEnabled}} (リーフプロパティ) // ラベルの表示を許可する
{{w1.panZoomEnabled}} (リーフプロパティ) // パン・ズームを許可する
{{w1.selection.indices}} (配列) // 選択されたインデックスの配列
{{w1.selection.xMax}} (リーフプロパティ) // 選択範囲のxの最大値
{{w1.selection.xMin}} (リーフプロパティ) // 選択範囲のxの最小値
{{w1.selection.xValues}} (配列) // 選択範囲のx値の配列
{{w1.selection.yMax}} (リーフプロパティ) // 選択範囲のyの最大値
{{w1.selection.yMin}} (リーフプロパティ) // 選択範囲のyの最小値
{{w1.selection.yValues}} (配列) // 選択範囲のy値の配列
{{w1.tooltipsEnabled}} (リーフプロパティ) // ツールチップの表示を許可する
{{w1.xAxes}} (配列) // x軸の配列
{{w1.yAxes}} (配列) // y軸の配列
{{w1.yAxes.[0]}} (配列内のサブプロパティ) // y軸配列の最初の要素
{{w1}} (アクセス不可、リーフでない)
{{w1.selection}} (アクセス不可、リーフでない)
クエリエディターのHandlebarsテンプレートは常に文字列値に置き換えられます。テンプレートが文字列に評価されない場合、その値は最初に文字列に変換されます。これは、クエリ自体が常に文字列であるためです。例えば：
Copied!1 2 3 4 5 6-- {{column w8.selectedValues}}カラムを選択します SELECT {{column w8.selectedValues}} -- allNamedテーブルから FROM allNamed -- nameが{{param w12.selection.xValues}}と等しい行を探します WHERE name = {{param w12.selection.xValues}};
非文字列の値は toString メソッドで変換されます。これは整数やブーリアンに対しては一般的に問題ありませんが、より複雑なオブジェクトに対しては予期しない出力を生成する可能性があります。例えば、オブジェクトに対して toString を実行すると、その結果は [object Object] となり、これはおそらくユーザーが望むものではありません。この問題を回避するために、 {{jsonStringify myObject}} のようなヘルパーを使用することができます。
クエリとは異なり、関数エディターのHandlebarsテンプレートは常に評価された値に置き換えられます。例えば：
Copied!1 2var a = {{query1}}; // query1はオブジェクトです。 var b = a.results[0]; // そのプロパティにアクセスすることができます。
ヘルパー関数はFunctionsエディタでは使用できません、Slateのオブジェクトを直接リファレンスする必要があります。また、関数の外部にある状態を変更することはできないため、変数やプロパティ値を設定することはできません。例えば：
Copied!1 2var 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はテンプレートを評価された値で直接置き換えます：
{{}} のセットが一つだけ存在する
そしていくつかの例を見てみましょう：
Copied!1 2 3 4 5 6 7 8 9 10 11 12{ // 値の置換えの例 "property1": "{{var1}}", // "property1"は"var1"の値に置換されます。 "property2": "{{ var1 }}", // 中括弧の内側に空白があります。 "property3": "{{ add 2 (add 1 var1) }}", // ヘルパーを使用して、ネスト可能です。 "property4": ["{{var1}}", "{{w1.property.[0]}"], // リスト内の要素も置換可能です。 // 文字列の置換えの例 "property5": "Hello {{var1}}!", // "var1"の値が挿入されます。 "property6": " {{var1}} ", // 中括弧の外側に空白があります。 "property7": "{{#if 0}}3{{else}}4{{/if}}" // 中括弧が複数組ある場合も対応可能です。 }
以下のチュートリアルでは、ユーザーが特定のフライトの航空機についてさらに詳しく知るためのボタンを作成する方法を学びます。これには、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 25function 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エディターの下にユーザーのインタラクションプロパティの読み取り専用の値を確認することができます。
これで、テーブルでTest を選択して関数の振る舞いを確認する選択を行うことができます。
選択関数を設定したので、テキストウィジェットを追加し、それを w_linkingButton と名付けてテーブルの上に移動することができます。ウィジェットのプロパティエディタで、Content の下の 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'> <!-- この要素がボタンとして機能することを示す属性 --> 航空機 {{f_selectedRowValues.[0].tail_num}} の詳細を学ぶ <!-- ボタン上のテキスト --> </a>