La sfârşitul acestui subiect, veţi putea să plasaţi componente pe pagina care execută acţiuni în cadrul componentei dvs. Se utilizează înregistrarea acţiunii pe care aţi creat-o la pasul anterior.
Pentru ca o componentă să execute o acţiune, aceasta trebuie să asculte mesajul EXECUTE_ACTION. Acest mesaj include, de asemenea, componenta payload transmisă către acţiunea din care veţi extrage valorile aşteptate.
Pentru a asculta mesajul EXECUTE_ACTION, editaţi fişierul render.js şi actualizaţi obiectul SampleComponentViewModel cu următoarea intrare:
SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));
La primirea mesajului EXECUTE_ACTION, funcţia de callback asociată este executată:
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);
}
});
}
}
Va fi creată o funcţie JavaScript pentru executarea acţiunii, apoi se va utiliza SDK-ul Sites pentru apelarea funcţiei ori de câte ori este generat mesajul EXECUTE_ACTION.
Componenta va fi apelată de fiecare dată când un mesaj EXECUTE_ACTION este generat şi depinde de componentă să trateze numai acţiunile pe care ea este proiectată să le trateze. Pentru a face acest lucru este necesar să verificaţi numele acţiunii, pentru a vă asigura că este o acţiune pe care componenta o poate trata.
Payloadul asociat acţiunii reprezintă o matrice de valori. De obicei, va fi necesar să găsiţi valorile componentei payload care vă interesează din matrice.
Notă:
Deoarece acest listener de acţiune este un callback, ar trebui să utilizaţi JavaScript Closure sau să legaţi în mod corespunzător funcţia pentru a vă asigura că aveţi acces la viewModel atunci când funcţia este executată.Verificaţi rezultatele de la pasul 8
Reîncărcaţi pagina din site-ul dvs., astfel ca Generatorul de site-uri să poată prelua modificările aduse componentei.
Treceţi pagina în modul Editare.
Glisaţi şi plasaţi componenta dvs. pe pagină.
Glisaţi şi plasaţi o componentă Buton pe pagină.
Aduceţi panoul Setări în dreptul componentei Buton.
Pe fila General, modificaţi eticheta butonului în Faceţi clic aici!
Selectaţi fila Link în partea de sus a panoului Setări.
Selectaţi Acţiuni trigger ca Tip de link.
Faceţi clic pe triggerul Faceţi clic pe buton în dreptul componentei Buton.
În dialogul respectiv, extindeţi componenta A_Local_Component în partea stângă.
Glisaţi şi plasaţi acţiunea Actualizare lăţime imagine din componenta A_Local_Component în partea dreaptă.
Introduceţi 300px în câmpul Lăţime imagine în pixeli.
Comutaţi pagina în modul Previzualizare.
Faceţi clic pe butonul Faceţi clic aici!.
În acest moment, dimensiunea imaginii va creşte la 300px.
Notă:
Triggerele şi acţiunile sunt proiectate pentru a suporta comunicarea între componente. Ele nu sunt proiectate pentru a crea sau gestiona starea. Dacă reîncărcaţi pagina, ea va reveni la starea sa iniţială, ca şi cum nu ar fi existat triggere generate sau acţiuni executate.Continuaţi cu Pasul 9: Crearea unui titlu distinct pt. fiecare instanţă a componentei.