Kulmatapahtumien käynnistäminen jQuerylla

Yksi asioista, joista nautin WordPressin kanssa työskentelyssä, on kyky tuoda kolmannen osapuolen kirjastoja ja työkaluja työskentelyyn.

Tämä ei tarkoita, etteivätkö he tulisi ilman oppimiskäyrään (he kaikki tekevät, eikö niin?), mutta on usein hauskaa – vaikkakin toisinaan turhauttavaa – sisällyttää ja sitten manipuloida sitä, mitä olet tekemässä.

Mitä tulee kolmannen osapuolen teknologioihin, olen nähnyt ihmisten tuovan mukanaan esimerkiksi Laravel Illuminate -paketin WordPressin kanssa.

Ja tiedän, että varsinkin viime vuosina monet ovat tuoneet komponentteja, kuten React ja Vue.

Yhdessä tällaisessa tapauksessa olen työskennellyt Angularin kanssa. Ja jos olet tottunut ES6:een, vanilja JavaScriptiin tai jQueryyn, Angular-tapahtumien käynnistäminen jQuerylla voi aluksi tuntua hieman oudolta.

Mutta kun ymmärrät merkinnän ja kuinka Angular käsittelee tapahtumiaan, se ei ole niin paha.

Kulmatapahtumien käynnistäminen jQuerylla

Angular toimii hieman eri tavalla kuin jQuery siinä, miten se on vuorovaikutuksessa DOM:n kanssa aina, kun tapahtuma tapahtuu.

Oletetaan esimerkiksi, että käyttämällä jQueryä (tai jopa vanilja JavaScriptiä) meillä on sivu ja sitten sillä sivulla on joukko merkintöjä, jotka voivat sisältää erilaisia ​​elementtejä. Nämä voivat olla:

• otsikot,
• kappaleet,
• etiketit,
• valita elementtejä,
• ja niin edelleen.

jQueryn kanssa olemme tottuneet tekemään jotain tällaista:

1. etsi elementti, jota haluamme käyttää joko tunnuksen, luokan nimen tai muun määritteen avulla,
2. kuuntele tapahtumaa,
3. vastata asianmukaisesti.

Joidenkin jQueryn uudempien ominaisuuksien ansiosta pystymme määrittelemään mukautettuja tapahtumia ja sitten asettamaan kuuntelijoita ja käsittelemään niitä asianmukaisesti, mutta yleinen toimintatapa on edelleen sama.

Angular toimii kuitenkin hieman eri tavalla.

Yksinkertaisuuden vuoksi (koska muistan, että yritän vain käydä läpi Angular-tapahtumien käynnistämisprosessin jQuerylla), Angularissa on merkintä aivan kuten missä tahansa tavallisessa HTML-asiakirjassa poikkeuksella.

Nimittäin mitä tahansa kulmapohjaista merkintää ohjaavat mukautetut attribuutit, joiden etuliitteenä on ng. Nämä käskevät Angularia kuuntelemaan tiettyjä tapahtumia, kun ne tapahtuvat, ja ryhtymään toimiin, kun ne tapahtuvat.

Jos esimerkiksi elementissä on attribuutti, joka näyttää tältä :

Sitten se tarkoittaa, että aina kun muutostapahtuma käynnistyy, Angularin on käynnistettävä asianmukainen käsittelijä ja tehtävä kaikki tarvittava varmistaakseen, että tietoja käsitellään oikein.

Mutta tässä on alkuperäinen kysymys: Kuinka voimme laukaista Angular-tapahtumia jQuerylla?

Pientä asettelua

Ennen kuin aloitan tämän tekemisen, haluan luoda esimerkkikoodin, joka perustuu Angulariin, joten olemme samalla sivulla sen suhteen, mistä puhun:

Lyhyesti sanottuna tämä on valittu elementti, jossa on useita vaihtoehtoja. Tavoitteena on kaksijakoinen:

1. muuttaa arvoa ohjelmallisesti jQueryn avulla,
2. lähettää tiedot käyttämällä alkuperäisiä Angular-funktioita.

Tarpeeksi suoraviivaista, eikö? Toki, mutta on muutamia huomionarvoisia asioita, ja käsittelen niitä seuraavassa osiossa.

Nyt jQueryyn

Oletetaan nyt, että aiomme tehdä jotain valituilla elementeillä, mutta emme aio käyttää Angularia. Sen sijaan aiomme käyttää jQueryä.

Mutta koska ratkaisu on rakennettu, Angular odottaa muutostapahtuman laukaisua DOM:ssa, jotta kehys voi tehdä tehtävänsä. Mutta jQuery toimii eri tavalla, eikö niin? Sen sijaan se ottaa tapahtuman, käyttää määrittämäämme tilaajaa ja käsittelee sen sitten.

Tässä kohtaa työmme Angular-tapahtumien käynnistämisessä jQueryn avulla tulee esiin. Selvyyden vuoksi se ei ole niin yksinkertaista kuin koodin soittaminen jQueryn kautta seuraavasti :

$('select['ng-model="item.payment_method"]').trigger('change');

Sen sijaan voimme asettaa arvon jQuerylla, mutta sitten meidän on käytettävä Angular-toimintoa oikean tapahtumakäsittelijän käynnistämiseksi. Se on edelleen muutostapahtuma, mutta miten teemme sen, on eri asia.

Seuraavassa koodissa näet, missä muutan Select-elementtiä ja asetan sen toisen vaihtoehdon valituksi vaihtoehdoksi ja käskee sitten Angularia tekemään asiansa käynnistämällä muutostapahtuman, johon elementti on sidottu.

$('select[ng-model="schedule.payment_method"]').each(function() {

  // For the purposes of this example, we're going to select the first option.
  $(this)
    .children('option:eq(1)')
    .attr('selected', 'selected');

  // Make sure the select element reflects the change (as setting the option doesn't always do this properly).
  $(this).val($(this).children('option:selected').attr('value'));

  // Now use the Angular API's triggerHandler function to call the change.
  angular.element($(this)).triggerHandler('change');
});

Kuten näette, ei ole juurikaan eroa; Sen sijaan, että kutsuisimme  elementin liipaisinta jQueryn kautta, käytämme Angularin tarjoamaa API:ta. Ja se hoitaa sen.

Tällaisia ​​tekniikoita harkiten

En ole Angular-asiantuntija (enkä ole väittänytkään olevani), mutta kun tulee työskentelemään voimakkaasti muokatun, kolmannen osapuolen ratkaisun ja käytettävissäni olevien työkalujen sekä aika- ja budjettirajoitusten kanssa, se on hyödyllistä. tietää kuinka käsitellä näitä asioita.

Joten ehkä tästä on sinulle apua tulevassa projektissa.