Tämän aiheen läpikäytyäsi osaat pudottaa komponentteja sivulle, joka suorittaa toimintoja komponentissa. Tässä hyödynnetään edellisessä vaiheessa luotua toiminnon rekisteröintiä.
Komponentin on kuunneltava EXECUTE_ACTION
-sanomaa, jotta se voisi suorittaa toiminnon. Sanoma sisältää myös toimintoon välitetyt käsitellyt tiedot, joista on poimittava odotetut arvot.
Voit määrittää EXECUTE_ACTION
-sanoman kuunneltavaksi muokkaamalla render.js
-tiedostoa ja päivittämällä seuraavat merkinnät SampleComponentViewModel
-objektiin:
SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));
Kun EXECUTE_ACTION
-sanoma on vastaanotettu, suoritetaan siihen liittyvä vastakutsufunktio:
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); } }); } }
Tämä luo JavaScript-funktion toiminnon suoritusta varten ja kutsuu sitten funktiota sivustojen SDK:n avulla aina, kun EXECUTE_ACTION
-sanoma lähetetään.
Komponentti kutsutaan aina, kun EXECUTE_ACTION
-sanoma lähetetään. Komponentin on itse huolehdittava siitä, että se käsittelee vain toiminnot, jotka se on suunniteltu käsittelemään. Jotta näin kävisi, toiminnon nimi on tarkistettava, jotta voidaan varmistaa, että komponentti pystyy käsittelemään sen.
Toiminnon tiedot muodostavat arvojen taulukon. Yleensä huomioitavat käsiteltyjen tietojen arvot on etsittävä taulukosta.
Huomautus::
Koska toimintojen kuuntelija on vastakutsu, varmista, että viewModel on käytettävissä, kun funktio suoritetaan. Voit tehdä tämän käyttämällä JavaScript-sulkeumaa tai sitomalla funktion asianmukaisesti.Tarkista vaiheen 8 tulokset
Päivitä sivustossasi oleva sivu, jotta sivustonluontiohjelma voi poimia komponenttiin tehdyt muutokset.
Aseta sivu muokkaustilaan.
Vedä ja pudota komponentti sivulle.
Vedä ja pudota painikekomponentti sivulle.
Avaa painikekomponentin Asetukset-paneeli.
Vaihda Yleiset-välilehdessä painikkeen nimeksi Napsauta tätä!
Valitse Linkki-välilehti Asetukset-paneelin yläosassa.
Valitse linkkityypiksi Herätintoiminnot.
Napsauta painikekomponentin Napsauta painiketta -herätintä.
Laajenna A_Local_Component
-komponentti valintaikkunan vasemmassa reunassa.
Vedä ja pudota Päivitä kuvan leveys -toiminto A_Local_Component
-komponentista oikeaan reunaan.
Syötä Kuvan leveys pikseleinä -kenttään arvo300px.
Vaihda sivu esikatselutilaan.
Napsauta Napsauta tätä! -painiketta.
Tällöin kuvan koko kasvaa kokoon 300px
.
Huomautus::
Herättimet ja toiminnot on suunniteltu tukemaan komponenttien välistä tietoliikennettä. Niitä ei ole tarkoitettu luomaan tai hallitsemaan tiloja. Jos päivität sivun, sivu palaa alkuperäiseen tilaansa, ellei herättimiä käynnistetä tai toimintoja suoriteta.Jatka kohtaan Vaihe 9: erillisen otsikon luonti kullekin komponentin instanssille.