ステップ8: アクションの実行
このトピックの最後では、コンポーネントを、コンポーネント内のアクションを実行するページにドロップできるようになります。 ここでは、前のステップで作成したアクション登録を活用します。
コンポーネントがアクションを実行するには、EXECUTE_ACTIONメッセージをリスニングする必要があります。 このメッセージには、予期される値の抽出元となる、アクションに渡されるペイロードも含まれています。
EXECUTE_ACTIONメッセージをリスニングするには、render.jsファイルを編集し、次のエントリでSampleComponentViewModelオブジェクトを更新します:
SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));EXECUTE_ACTIONメッセージを受信すると、関連するコールバック関数が実行されます:
self.executeActionsListener = function (args) {
// get action and payload
var payload = args.payload,
action = args.action;
// handle 'setImageWidth' actions
if (action && action.actionName === 'setImageWidth') {
$.each(payload, function(index, data) {
if (data.name === 'imageWidth') {
self.imageWidth(data.value);
}
});
}
}これにより、アクションを実行するためのJavaScript関数が作成され、EXECUTE_ACTIONメッセージが生成されるたびに、Sites SDKを使用して関数が呼び出されます。
コンポーネントは、EXECUTE_ACTIONメッセージが生成されるたびにコールされ、処理するように設計されているアクションのみを処理するコンポーネント次第です。 これを行うには、コンポーネントで処理できるアクションであることを確認するためにアクションの名前を確認する必要があります。
アクションのペイロードは、値の配列です。 通常は、配列から、関心のあるペイロード値を見つける必要があります。
ノート:
アクション・リスナーはコールバックであるため、JavaScriptクロージャを使用するか関数を適切にバインドして、関数の実行時に必ずViewModelにアクセスできるようにする必要があります。ステップ8の結果の確認
-
サイト・ビルダーがコンポーネントへの変更を選択できるように、サイト内のページをリフレッシュします。
-
ページを編集モードにします。
-
コンポーネントをページにドラッグ・アンド・ドロップします。
-
ページにボタン・コンポーネントをドラッグ・アンド・ドロップします。
-
そのボタン・コンポーネントに対して「設定」パネルを開きます。
-
「一般」タブで、ボタンのラベルをClick me!に変更します
-
「設定」パネル上部にある「リンク」タブを選択します。
-
「リンク・タイプ」として「トリガー・アクション」を選択します。
-
ボタン・コンポーネントに対する「ボタンをクリック」トリガーをクリックします。
-
ダイアログで、左側の
A_Local_Componentコンポーネントを展開します。 -
「イメージの幅を更新」アクションを
A_Local_Componentコンポーネントから右側にドラッグ・アンド・ドロップします。 -
「画像の幅(ピクセル)」フィールドに300pxと入力します。
-
ページをプレビュー・モードに切り替えます。
-
「Click me!」ボタンをクリックします。
この時点で、イメージのサイズが300pxに増加します。
ノート:
トリガーとアクションは、コンポーネント間通信をサポートするように設計されています。 それらは、状態を作成または管理するようには設計されていません。 ページをリフレッシュすると、トリガーが発生しなかったかアクションが実行されなかったかのように、ページが元の状態に戻ります。