このトピックの最後で、コンポーネント内のアクションを実行するコンポーネントをページにドロップできるようになります。ここでは、前述のステップで作成したアクション登録を活用します。
コンポーネントがアクションを実行するには、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メッセージが呼び出されるたびにサイトSDKを使用して関数がコールされます。
このコンポーネントは、EXECUTE_ACTIONメッセージが呼び出されるたびにコールされ、処理対象として設計されているアクションのみを処理するかどうかはコンポーネント次第です。これを行うには、アクションの名前を確認し、コンポーネントが処理可能なものであることを確認する必要があります。
アクションのペイロードは値の配列です。通常、関心のあるペイロード値を配列から探し出す必要があります。
注:
アクション・リスナーはコールバックであるため、JavaScriptクロージャを使用するか、関数を適切にバインドし、関数の実行時にviewModelにアクセスできることを確認する必要があります。ステップ8の結果の確認
サイト・ビルダーでコンポーネントへの変更内容を反映できるように、サイトでページをリフレッシュします。
ページを編集モードで取り込みます。
コンポーネントをページにドラッグ・アンド・ドロップします。
ボタン・コンポーネントをページにドラッグ・アンド・ドロップします。
「設定」パネルをボタン・コンポーネントに対して開きます。
「一般」タブで、ボタンのラベルを「ここをクリック」に変更します
「設定」パネルの最上部で「リンク」タブを選択します。
「リンク・タイプ」として、「トリガー・アクション」を選択します。
ボタン・コンポーネントに対して「ボタンをクリック」トリガーをクリックします。
ダイアログの左側で、A_Local_Componentコンポーネントを展開します。
画像の幅の更新アクションをA_Local_Componentコンポーネントから右側にドラッグ・アンド・ドロップします。
300pxを「画像の幅(ピクセル)」フィールドに入力します。
ページをプレビュー・モードに切り替えます。
「ここをクリック」ボタンをクリックします。
ここで、画像のサイズが300pxに増加します。
注:
トリガーおよびアクションは、コンポーネント間の通信をサポートするように設計されています。これらは状態を作成または管理するように設計されていません。ページをリフレッシュすると、トリガーが呼び出されていないか、アクションが実行されていないかのように、ページが元の状態に戻ります。