Turbo’nun \u00d6zel Etkinlikleri: Kullan\u0131m \u00d6rnekleri ve \u0130pu\u00e7lar\u0131<\/p>\n
Merhaba! Fatih Soysal burada. Bu makalede, Hotwire framework’\u00fcn\u00fcn bir par\u00e7as\u0131 olan Turbo’nun g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri olan \u00f6zel etkinliklerin (custom events) kullan\u0131m \u00f6rneklerini ve ipu\u00e7lar\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z. \u00d6ncelikle, Turbo’nun ne oldu\u011funu k\u0131saca hat\u0131rlayal\u0131m. Turbo, sunucu taraf\u0131ndan olu\u015fturulan HTML par\u00e7alar\u0131n\u0131 istemci taraf\u0131nda dinamik olarak g\u00fcncelleyerek h\u0131zl\u0131 ve verimli web uygulamalar\u0131 geli\u015ftirmenizi sa\u011flayan bir framework’t\u00fcr. Bu i\u015flem s\u0131ras\u0131nda ise, \u00f6zel etkinlikler devreye girerek uygulaman\u0131z\u0131n farkl\u0131 k\u0131s\u0131mlar\u0131 aras\u0131nda etkili ileti\u015fim kurman\u0131z\u0131 sa\u011flar.<\/p>\n
Peki, \u00f6zel etkinlikler ne i\u015fe yarar? K\u0131saca, uygulaman\u0131z\u0131n farkl\u0131 bile\u015fenleri aras\u0131nda veri ve olaylar\u0131 iletmek i\u00e7in kullanabilece\u011finiz \u00f6zelle\u015ftirilebilir bir mekanizmad\u0131r. \u00d6rne\u011fin, bir form g\u00f6nderildi\u011finde, bir modal pencere a\u00e7\u0131ld\u0131\u011f\u0131nda veya bir API \u00e7a\u011fr\u0131s\u0131 sonucunda bir g\u00fcncelleme yap\u0131ld\u0131\u011f\u0131nda \u00f6zel etkinlikler devreye girerek ilgili bile\u015fenleri haberdar eder. Bu sayede, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmleri aras\u0131nda senkronizasyon sa\u011flar ve kodunuzu daha d\u00fczenli hale getirirsiniz.<\/p>\n
\u015eimdi, baz\u0131 pratik kullan\u0131m \u00f6rneklerine bakal\u0131m. \u00d6rne\u011fin, bir \u00fcr\u00fcn listesini g\u00f6r\u00fcnt\u00fcledi\u011finiz bir sayfay\u0131 d\u00fc\u015f\u00fcnelim. Kullan\u0131c\u0131 bir \u00fcr\u00fcn\u00fc sepete ekledi\u011finde, sepet say\u0131s\u0131n\u0131 g\u00fcncellememiz gerekir. \u0130\u015fte burada \u00f6zel etkinlikler devreye giriyor. \u00dcr\u00fcn ekleme i\u015flemi sonras\u0131nda, “ Ba\u015fka bir \u00f6rnek olarak, bir form g\u00f6nderim i\u015flemini ele alal\u0131m. Form g\u00f6nderildi\u011finde, “ Bu \u00f6rnekte, “ Uygulaman\u0131zda \u00f6zel etkinlikleri etkili bir \u015fekilde kullanmak i\u00e7in baz\u0131 ipu\u00e7lar\u0131:<\/p>\n Umar\u0131m bu makale, Turbo’nun \u00f6zel etkinliklerini daha iyi anlaman\u0131za ve uygulamalar\u0131n\u0131zda kullanman\u0131za yard\u0131mc\u0131 olmu\u015ftur. Daha fazla bilgi ve \u00f6rnek i\u00e7in bu makaleye<\/a> ve kendi web sitem fatihsoysal.com<\/a> adresine g\u00f6z atabilirsiniz. Herhangi bir sorunuz varsa, l\u00fctfen bana bildirin!<\/p>\n #Etiketler: Turbo, \u00d6zel Etkinlikler, Custom Events, JavaScript, Web Geli\u015ftirme, Performans, Etkile\u015fim, Fatih Soysal, Hotwireproduct:added<\/code>” gibi bir \u00f6zel etkinlik tetikleyebilir ve sepet say\u0131s\u0131n\u0131 g\u00fcncelleyen bir bile\u015feni bu etkinli\u011fi dinlemeye alabilirsiniz. Bu sayede, \u00fcr\u00fcn ekleme i\u015flemi ile sepet g\u00fcncelleme i\u015flemi aras\u0131nda s\u0131k\u0131 bir ba\u011flant\u0131 kurmu\u015f oluruz.<\/p>\nform:submitted<\/code>” gibi bir \u00f6zel etkinlik tetikleyerek, g\u00f6nderim i\u015fleminin ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol eden bir bile\u015feni bilgilendirebilirsiniz. Bu, kullan\u0131c\u0131ya geri bildirim sa\u011flamak veya ba\u015fka i\u015flemler ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131labilir. Bu durum, uygulaman\u0131z\u0131n kullan\u0131c\u0131 deneyimini olumlu y\u00f6nde etkileyecektir.<\/p>\nKod \u00d6rne\u011fi:<\/h3>\n
\n\/\/ product.js\ndocument.addEventListener('turbo:load', () => {\n document.addEventListener('product:added', (event) => {\n \/\/ Sepet say\u0131s\u0131n\u0131 g\u00fcncelle\n updateCartCount(event.detail.count);\n });\n});\n\n\n\/\/ sepet g\u00fcncelleme fonksiyonu\nfunction updateCartCount(count){\n \/\/ burada sepet say\u0131s\u0131n\u0131 g\u00fcncellemek i\u00e7in gerekli i\u015flemleri yap\u0131n\n}\n\n<\/code><\/pre>\nproduct:added<\/code>” adl\u0131 \u00f6zel bir etkinlik olu\u015fturuyoruz ve bu etkinli\u011fi dinleyen bir fonksiyon tan\u0131ml\u0131yoruz. Etkinlik tetiklendi\u011finde, event.detail<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla ek bilgiler alabiliriz. Bu, uygulaman\u0131z\u0131n daha esnek ve \u00f6zelle\u015ftirilebilir olmas\u0131n\u0131 sa\u011flar. Elbette bu sadece bir \u00f6rnektir; daha karma\u015f\u0131k senaryolarda da benzer \u015fekilde \u00f6zel etkinlikler kullanabilirsiniz.<\/p>\nTurbo \u00d6zel Etkinlikleriyle \u0130lgili \u0130pu\u00e7lar\u0131<\/h2>\n
\n
event.detail<\/code> \u00f6zelli\u011fini kullanarak etkinli\u011finizle ilgili detayl\u0131 bilgiler iletin.<\/li>\n
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Turbo’nun \u00d6zel Etkinlikleri: Kullan\u0131m \u00d6rnekleri ve \u0130pu\u00e7lar\u0131 Merhaba! Fatih Soysal burada. Bu makalede, Hotwire framework’\u00fcn\u00fcn bir par\u00e7as\u0131 olan…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-9117","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n