本主題結束時，您將瞭解如何在頁面上置放將於元件內執行動作的元件。這利用到您在先前步驟中建立的動作註冊。
要執行動作的元件必須監聽 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 的結果
重新整理網站中的頁面，讓網站產生器能夠取得元件的變更。
將頁面切換為「編輯」模式
將您的元件拖放到頁面中。
將「按鈕」元件拖放到頁面中。
開啟「按鈕」元件的「設定值」面板。
在「一般」頁籤中，將按鈕的標籤變更為請按我！。
選取「設定值」面板頂端的連結頁籤。
選取觸發程式動作作為「連結類型」。
按一下「按鈕」元件的按一下按鈕觸發程式。
在對話方塊中，展開左側的 A_Local_Component 元件。
將更新影像寬度動作從 A_Local_Component 元件拖放到右側。
在影像寬度 (像素) 欄位中輸入 300px。
將頁面切換為「預覽」模式。
按一下請按我！按鈕。
此時，您影像的大小將會擴增為 300px。
註：
觸發程式和動作的目的都是用來支援元件間的通訊。他們的用途不是建立或管理狀態。如果您重新整理頁面，頁面將會回復成其原始狀態，就像未曾引發觸發程式或執行動作一樣。