Ja tied\u00e4n, ett\u00e4 varsinkin viime vuosina monet ovat tuoneet komponentteja, kuten React<\/a><\/strong> ja Vue<\/a><\/strong>.<\/p>\n Yhdess\u00e4 t\u00e4llaisessa tapauksessa olen ty\u00f6skennellyt Angularin<\/a><\/strong> kanssa. Ja jos olet tottunut ES6:een, vanilja JavaScriptiin tai jQueryyn, Angular-tapahtumien k\u00e4ynnist\u00e4minen jQuerylla voi aluksi tuntua hieman oudolta.<\/p>\n Mutta kun ymm\u00e4rr\u00e4t merkinn\u00e4n ja kuinka Angular k\u00e4sittelee tapahtumiaan, se ei ole niin paha.<\/p>\n Angular toimii hieman eri tavalla kuin jQuery siin\u00e4, miten se on vuorovaikutuksessa DOM:n kanssa aina, kun tapahtuma tapahtuu.<\/p>\n Oletetaan esimerkiksi, ett\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 jQuery\u00e4 (tai jopa vanilja JavaScripti\u00e4) meill\u00e4 on sivu ja sitten sill\u00e4 sivulla on joukko merkint\u00f6j\u00e4, jotka voivat sis\u00e4lt\u00e4\u00e4 erilaisia \u200b\u200belementtej\u00e4. N\u00e4m\u00e4 voivat olla:<\/p>\n jQueryn kanssa olemme tottuneet tekem\u00e4\u00e4n jotain t\u00e4llaista:<\/p>\n Joidenkin jQueryn uudempien ominaisuuksien ansiosta pystymme m\u00e4\u00e4rittelem\u00e4\u00e4n mukautettuja tapahtumia ja sitten asettamaan kuuntelijoita ja k\u00e4sittelem\u00e4\u00e4n niit\u00e4 asianmukaisesti, mutta yleinen toimintatapa on edelleen sama.<\/p>\n Angular toimii kuitenkin hieman eri tavalla.<\/p>\n Yksinkertaisuuden vuoksi (koska muistan, ett\u00e4 yrit\u00e4n vain k\u00e4yd\u00e4 l\u00e4pi Angular-tapahtumien k\u00e4ynnist\u00e4misprosessin jQuerylla), Angularissa on merkint\u00e4 aivan kuten miss\u00e4 tahansa tavallisessa HTML-asiakirjassa poikkeuksella.<\/p>\n Nimitt\u00e4in mit\u00e4 tahansa kulmapohjaista merkint\u00e4\u00e4 ohjaavat mukautetut attribuutit, joiden etuliitteen\u00e4 on ng.<\/strong> N\u00e4m\u00e4 k\u00e4skev\u00e4t Angularia kuuntelemaan tiettyj\u00e4 tapahtumia, kun ne tapahtuvat, ja ryhtym\u00e4\u00e4n toimiin, kun ne tapahtuvat.<\/p>\n Jos esimerkiksi elementiss\u00e4 on attribuutti, joka n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4<\/a><\/strong> :<\/p>\n Sitten se tarkoittaa, ett\u00e4 aina kun muutostapahtuma<\/strong> k\u00e4ynnistyy, Angularin on k\u00e4ynnistett\u00e4v\u00e4 asianmukainen k\u00e4sittelij\u00e4 ja teht\u00e4v\u00e4 kaikki tarvittava varmistaakseen, ett\u00e4 tietoja k\u00e4sitell\u00e4\u00e4n oikein.<\/p>\n Mutta t\u00e4ss\u00e4 on alkuper\u00e4inen kysymys: Kuinka voimme laukaista Angular-tapahtumia jQuerylla?<\/p>\n Ennen kuin aloitan t\u00e4m\u00e4n tekemisen, haluan luoda esimerkkikoodin<\/a><\/strong>, joka perustuu Angulariin, joten olemme samalla sivulla sen suhteen, mist\u00e4 puhun:<\/p>\n Lyhyesti sanottuna t\u00e4m\u00e4 on valittu elementti, jossa on useita vaihtoehtoja. Tavoitteena on kaksijakoinen:<\/p>\n Tarpeeksi suoraviivaista, eik\u00f6? Toki, mutta on muutamia huomionarvoisia asioita, ja k\u00e4sittelen niit\u00e4 seuraavassa osiossa.<\/p>\n Oletetaan nyt, ett\u00e4 aiomme tehd\u00e4 jotain valituilla<\/strong> elementeill\u00e4, mutta emme aio k\u00e4ytt\u00e4\u00e4 Angularia. Sen sijaan aiomme k\u00e4ytt\u00e4\u00e4 jQuery\u00e4.<\/p>\n Mutta koska ratkaisu on rakennettu, Angular odottaa muutostapahtuman<\/strong> laukaisua DOM:ssa, jotta kehys voi tehd\u00e4 teht\u00e4v\u00e4ns\u00e4. Mutta jQuery toimii eri tavalla, eik\u00f6 niin? Sen sijaan se ottaa tapahtuman, k\u00e4ytt\u00e4\u00e4 m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4mme tilaajaa ja k\u00e4sittelee sen sitten.<\/p>\n T\u00e4ss\u00e4 kohtaa ty\u00f6mme Angular-tapahtumien k\u00e4ynnist\u00e4misess\u00e4 jQueryn avulla tulee esiin. Selvyyden vuoksi se ei ole niin yksinkertaista kuin koodin soittaminen jQueryn kautta seuraavasti<\/a><\/strong> :<\/p>\n Sen sijaan voimme asettaa arvon jQuerylla, mutta sitten meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 Angular-toimintoa oikean tapahtumak\u00e4sittelij\u00e4n k\u00e4ynnist\u00e4miseksi. Se on edelleen muutostapahtuma<\/strong>, mutta miten teemme sen, on eri asia.<\/p>\n Seuraavassa koodissa<\/a><\/strong> n\u00e4et, miss\u00e4 muutan Select-elementti\u00e4 ja asetan sen toisen vaihtoehdon valituksi vaihtoehdoksi ja k\u00e4skee sitten Angularia tekem\u00e4\u00e4n asiansa k\u00e4ynnist\u00e4m\u00e4ll\u00e4 muutostapahtuman<\/strong>, johon elementti on sidottu.<\/p>\n Kuten n\u00e4ette, ei ole juurikaan eroa; Sen sijaan, ett\u00e4 kutsuisimme\u00a0 elementin liipaisinta<\/a> jQueryn kautta, k\u00e4yt\u00e4mme Angularin tarjoamaa API:ta. Ja se hoitaa sen.<\/p>\n En ole Angular-asiantuntija (enk\u00e4 ole v\u00e4itt\u00e4nytk\u00e4\u00e4n olevani), mutta kun tulee ty\u00f6skentelem\u00e4\u00e4n voimakkaasti muokatun, kolmannen osapuolen ratkaisun ja k\u00e4ytett\u00e4viss\u00e4ni olevien ty\u00f6kalujen sek\u00e4 aika- ja budjettirajoitusten kanssa, se on hy\u00f6dyllist\u00e4. tiet\u00e4\u00e4 kuinka k\u00e4sitell\u00e4 n\u00e4it\u00e4 asioita.<\/p>\n Joten ehk\u00e4 t\u00e4st\u00e4 on sinulle apua tulevassa projektissa.<\/p>\n![\"Kulmatapahtumien](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f54b1a2e.png\")
<\/a><\/p>\n![\"Kulmatapahtumien](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5876c07.png\")
<\/a><\/p>\n![\"Kulmatapahtumien](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162460-61e73f5cad032.png\")
<\/a><\/p>\nKulmatapahtumien k\u00e4ynnist\u00e4minen jQuerylla<\/h2>\n
\n
\n
<select class=\"form-control ng-pristine ng-untouched ng-valid ng-empty\" ng-model=\"item.payment_method\" ng-change=\"updatePaymentMethod(item)\" ng-options=\"method.display_name for method in paymentMethods track by method.id\">\n <!-- more to come -->\n<\/select><\/code><\/pre>\nPient\u00e4 asettelua<\/h3>\n
<select class=\"form-control ng-pristine ng-untouched ng-valid ng-empty\" ng-model=\"item.payment_method\" ng-change=\"updatePaymentMethod(item)\" ng-options=\"method.display_name for method in paymentMethods track by method.id\">\n <option value=\"?\"><\/option>\n <option value=\"1042\" selected=\"selected\">Card 1001 (01\/18)<\/option>\n<\/select><\/code><\/pre>\n\n
Nyt jQueryyn<\/h3>\n
$('select['ng-model=\"item.payment_method\"]').trigger('change');<\/code><\/pre>\n$('select[ng-model=\"schedule.payment_method\"]').each(function() {\n\n \/\/ For the purposes of this example, we're going to select the first option.\n $(this)\n .children('option:eq(1)')\n .attr('selected', 'selected');\n\n \/\/ Make sure the select element reflects the change (as setting the option doesn't always do this properly).\n $(this).val($(this).children('option:selected').attr('value'));\n\n \/\/ Now use the Angular API's triggerHandler function to call the change.\n angular.element($(this)).triggerHandler('change');\n});<\/code><\/pre>\nT\u00e4llaisia \u200b\u200btekniikoita harkiten<\/h2>\n