Nurgasündmuste käivitamine jQuery abil

Viimati uuendatud dets. 7, 2022

Sisu

Üks asi, mis mulle WordPressiga töötamisel meeldib, on võimalus kaasata kolmandate osapoolte teeke ja tööriistu, millega töötada.

See ei tähenda, et nad ei tuleks ilma oma õppimiskõverata (nad kõik teevad, eks?), kuid sageli on lõbus – ehkki kohati masendav – oma tegemistega kaasata ja seejärel sellega manipuleerida.

Mis puutub kolmandate osapoolte tehnoloogiatesse, siis olen näinud, et inimesed toovad WordPressiga kaasa selliseid asju nagu Laravel Illuminate.

Ja ma tean, et eriti viimastel aastatel on paljud sisse toonud selliseid komponente nagu React ja Vue.

Ühel sellisel juhul olen Angulariga veidi tööd teinud. Ja kui olete harjunud ES6, vanilje JavaScripti või jQuery kasutamisega, võib Angular sündmuste käivitamine jQueryga alguses tunduda pisut veider.

Kuid kui mõistate märgistust ja seda, kuidas Angular oma sündmusi käsitleb, pole see nii hull.

Nurgasündmuste käivitamine jQuery abil

Angular töötab jQueryst pisut erinevalt selle poolest, kuidas see DOM-iga suhtleb, kui sündmus juhtub.

Näiteks oletame, et jQuery (või isegi vanilje JavaScripti) kasutamisel on meil leht ja sellel lehel on märgistus, mis võib sisaldada mitmesuguseid elemente. Need võivad olla:

pealkirjad,
lõigud,
sildid,
vali elemente,
ja nii edasi.

jQueryga oleme harjunud tegema midagi sellist:

leida element, millega tahame töötada kas ID, klassi nime või mõne muu atribuudi kaudu,
kuulata sündmust,
asjakohaselt reageerida.

Mõnede jQuery uuemate funktsioonide tõttu saame määratleda kohandatud sündmusi ja seejärel seadistada kuulajaid ning neid asjakohaselt käsitleda, kuid üldine käitumine on endiselt sama.

Angular töötab siiski veidi teisiti.

Et see oleks arusaadav (sest pidage meeles, et ma lihtsalt üritan jQuery abil nurgeliste sündmuste käivitamise praktilist protsessi läbi viia), on Angularil märgistus sarnaselt kõigi tavaliste HTML-dokumentidega, välja arvatud erandiga.

Nimelt juhivad mis tahes nurgapõhist märgistust kohandatud atribuudid, mille eesliide on ng. Need käsivad Angularil kuulata teatud sündmusi, kui need juhtuvad, ja kui need juhtuvad, siis tegutsema.

Näiteks kui elemendil on atribuut, mis näeb välja selline :

See tähendab, et iga kord, kui muudatuse sündmus käivitatakse, peab Angular käivitama vastava töötleja ja tegema kõik, mida ta peab tegema, et tagada andmete õige käsitlemine.

Kuid siin peitubki esialgne küsimus: kuidas saame jQuery abil nurgelisi sündmusi käivitada?

Väike seadistus

Enne seda, kuidas seda teha, tahan luua näidiskoodi, mis põhineb Angularil, nii et oleme sellega, millest räägin, samal lehel:

Lühidalt öeldes on see valik element, millel on mitmeid valikuid. Eesmärk on kahekordne:

programmiliselt muuta väärtust jQuery abil,
saata teavet natiivsete nurkfunktsioonide abil.

Piisavalt otsekohene, eks? Muidugi, kuid on mõned asjad, mis väärivad tähelepanu ja ma käsitlen neid järgmises jaotises.

Nüüd jQuery juurde

Oletame nüüd, et teeme midagi valitud elementidega, kuid me ei kasuta Angulari. Selle asemel hakkame kasutama jQueryt.

Kuid lahenduse ülesehitamise viisi tõttu ootab Angular, kuni DOM-is käivitub muudatussündmus, et raamistik saaks oma asja teha. Kuid jQuery töötab teisiti, eks? Selle asemel võtab see sündmuse, kasutab meie seadistatud tellijat ja seejärel tegeleb sellega.

Siin tuleb mängu meie töö Angular sündmuste käivitamisel jQuery abil. Selguse huvides ei ole see nii lihtne kui koodi helistamine jQuery kaudu, nagu see :


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

Selle asemel saame väärtuse määrata jQuery abil, kuid siis peame õige sündmuste käitleja käivitamiseks kasutama Angular. See on endiselt muutuste sündmus, kuid see, kuidas me seda teeme, on erinev.

Järgmises koodis näete, kus ma muudan valitud elementi, et määrata selle teine valik valitud suvandiks, ja seejärel juhendada Angular seda tegema, käivitades muudatuse sündmuse, millega element on seotud.


$('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');
});

Nagu näete, ei erine seal palju; aga selle asemel, et kutsuda elemendi päästikut jQuery kaudu, kasutame Angulari pakutavat API-d. Ja see hoolitseb selle eest.

Selliste tehnikate mõistlik kasutamine

Ma ei ole Angular-ekspert (ega ka väitnud, et olen), kuid kui tegemist on tugevalt muudetud kohandatud kolmanda osapoole lahendusega töötamisega ja minu käsutuses olevate tööriistadega ning aja- ja eelarvepiirangutega, on see kasulik. teada, kuidas neid asju käsitleda.

Nii et võib-olla on see teile tulevases projektis abiks.

: tommcfarlin.com