{"id":38517,"date":"2026-02-01T23:40:58","date_gmt":"2026-02-01T20:40:58","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38517"},"modified":"2026-02-01T23:40:58","modified_gmt":"2026-02-01T20:40:58","slug":"meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/","title":{"rendered":"Meteor&#8217;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler"},"content":{"rendered":"<p><body><\/p>\n<h2>Meteor&#8217;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler<\/h2>\n<h3>Giri\u015f<\/h3>\n<p>Modern web uygulamalar\u0131, kullan\u0131c\u0131larla s\u00fcrekli etkile\u015fim halinde olan dinamik aray\u00fczler sunar. Bu etkile\u015fimler, bir buton t\u0131klamas\u0131ndan bir form g\u00f6nderimine, bir liste \u00f6\u011fesinin \u00fczerine gelmeye kadar \u00e7e\u015fitli \u015fekillerde ortaya \u00e7\u0131kar. Kullan\u0131c\u0131 deneyiminin merkezinde yer alan bu etkile\u015fimleri verimli, y\u00f6netilebilir ve okunabilir bir \u015fekilde ele almak, herhangi bir web geli\u015ftirme \u00e7at\u0131s\u0131n\u0131n temel bir yetene\u011fidir. Meteor, reaktif yap\u0131s\u0131yla ve \u00f6zellikle varsay\u0131lan UI k\u00fct\u00fcphanesi Blaze ile bu t\u00fcr etkile\u015fimleri kolayla\u015ft\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunar: \u015eablon Olay Haritalar\u0131 (Template Event Maps).<\/p>\n<p>Meteor&#8217;un felsefesi, tam y\u0131\u011f\u0131n (full-stack) geli\u015ftirme deneyimini basitle\u015ftirmek ve ger\u00e7ek zamanl\u0131 uygulamalar olu\u015fturmay\u0131 h\u0131zland\u0131rmakt\u0131r. Blaze, bu felsefenin bir par\u00e7as\u0131 olarak, verilerin aray\u00fcze reaktif bir \u015fekilde akmas\u0131n\u0131 sa\u011flarken, kullan\u0131c\u0131 girdilerini ve eylemlerini yakalamak i\u00e7in zarif bir yol sunar. \u015eablon olay haritalar\u0131, geli\u015ftiricilerin HTML \u015fablonlar\u0131 i\u00e7indeki belirli DOM olaylar\u0131na (\u00f6rne\u011fin, t\u0131klamalar, klavye giri\u015fleri, form g\u00f6nderimleri) yan\u0131t veren JavaScript fonksiyonlar\u0131n\u0131 tan\u0131mlamas\u0131na olanak tan\u0131r. Bu sayede, uygulaman\u0131n etkile\u015fim mant\u0131\u011f\u0131 do\u011frudan ilgili \u015fablonla ili\u015fkilendirilir, bu da kodun mod\u00fclerli\u011fini, okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu makale, Meteor&#8217;daki \u015fablon olay haritalar\u0131n\u0131n derinlemesine incelenmesini, temel kullan\u0131mlar\u0131ndan geli\u015fmi\u015f tekniklere, en iyi uygulamalardan potansiyel avantajlar\u0131na kadar geni\u015f bir yelpazede ele alacakt\u0131r. Amac\u0131m\u0131z, geli\u015ftiricilerin bu g\u00fc\u00e7l\u00fc arac\u0131 tam potansiyeliyle kullanarak daha dinamik ve kullan\u0131c\u0131 dostu Meteor uygulamalar\u0131 olu\u015fturmalar\u0131na yard\u0131mc\u0131 olmakt\u0131r.<\/p>\n<h3>Meteor&#8217;da \u015eablon Yap\u0131s\u0131 ve Blaze<\/h3>\n<p>Meteor, \u00f6zellikle ilk zamanlar\u0131nda, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) katman\u0131 i\u00e7in kendi reaktif \u015fablonlama motoru olan Blaze&#8217;i varsay\u0131lan olarak benimsemi\u015ftir. Blaze, basitlik, reaktivite ve entegrasyon kolayl\u0131\u011f\u0131 \u00fczerine in\u015fa edilmi\u015ftir. Bir Meteor uygulamas\u0131nda, genellikle <code>.html<\/code> ve <code>.js<\/code> uzant\u0131l\u0131 dosyalar arac\u0131l\u0131\u011f\u0131yla \u015fablonlar tan\u0131mlan\u0131r.<\/p>\n<h4>Blaze \u015eablonlar\u0131 ve Dosya Yap\u0131s\u0131<\/h4>\n<p>Bir Blaze \u015fablonu, genellikle <code>.html<\/code> dosyas\u0131nda <code><template name=\"MyTemplate\">...<\/template><\/code> etiketleri aras\u0131nda tan\u0131mlan\u0131r. Bu HTML yap\u0131s\u0131, uygulaman\u0131n g\u00f6rsel k\u0131sm\u0131n\u0131 olu\u015fturur. \u015eablonun davran\u0131\u015fsal mant\u0131\u011f\u0131 ise genellikle ayn\u0131 isimdeki bir <code>.js<\/code> dosyas\u0131nda (<code>MyTemplate.js<\/code>) tan\u0131mlan\u0131r. Bu <code>.js<\/code> dosyas\u0131, \u015fablonun ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131n\u0131 (\u00f6rne\u011fin, \u015fablon olu\u015fturuldu\u011funda, DOM&#8217;a render edildi\u011finde veya yok edildi\u011finde \u00e7al\u0131\u015facak kodlar) ve as\u0131l konumuz olan olay haritalar\u0131n\u0131 i\u00e7erir.<\/p>\n<p>\u00d6rnek bir \u015fablon ve JavaScript dosyas\u0131 yap\u0131s\u0131 \u015f\u00f6yle olabilir:<\/p>\n<pre><code class=\"language-html\"><!-- myTemplate.html -->\n<template name=\"MyTemplate\">\n  <p>Merhaba, {{name}}!<\/p>\n  <button class=\"action-button\">T\u0131kla Beni<\/button>\n  <form class=\"data-form\">\n    <input type=\"text\" name=\"item\" placeholder=\"Yeni \u00f6\u011fe\">\n    <button type=\"submit\">Ekle<\/button>\n  <\/form>\n<\/template><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ myTemplate.js\nimport { Template } from 'meteor\/templating';\nimport '.\/myTemplate.html';\n\nTemplate.MyTemplate.onCreated(function() {\n  \/\/ \u015eablon olu\u015fturuldu\u011funda \u00e7al\u0131\u015facak kod\n  this.name = new ReactiveVar('D\u00fcnya');\n});\n\nTemplate.MyTemplate.helpers({\n  name() {\n    return Template.instance().name.get();\n  }\n});\n\nTemplate.MyTemplate.events({\n  \/\/ Olay haritas\u0131 buraya gelecek\n});<\/code><\/pre>\n<p>Bu yap\u0131, HTML&#8217;i JavaScript&#8217;ten ay\u0131r\u0131rken, \u015fablonun t\u00fcm mant\u0131\u011f\u0131n\u0131n tek bir mod\u00fcler birimde toplanmas\u0131n\u0131 sa\u011flar. Bu sayede, geli\u015ftiriciler belirli bir UI bile\u015feninin hem g\u00f6rselini hem de davran\u0131\u015f\u0131n\u0131 kolayca bulabilir ve y\u00f6netebilir.<\/p>\n<h4>\u015eablon Ya\u015fam D\u00f6ng\u00fcs\u00fc<\/h4>\n<p>Blaze \u015fablonlar\u0131, belirli ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131na sahiptir:<br \/>\n*   <code>onCreated()<\/code>: \u015eablon \u00f6rne\u011fi olu\u015fturuldu\u011funda, ancak hen\u00fcz DOM&#8217;a render edilmeden \u00f6nce \u00e7al\u0131\u015f\u0131r. Genellikle reaktif de\u011fi\u015fkenlerin veya aboneliklerin ba\u015flat\u0131lmas\u0131 i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <code>onRendered()<\/code>: \u015eablon DOM&#8217;a render edildikten sonra \u00e7al\u0131\u015f\u0131r. DOM manip\u00fclasyonlar\u0131 veya \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerin ba\u015flat\u0131lmas\u0131 i\u00e7in idealdir.<br \/>\n*   <code>onDestroyed()<\/code>: \u015eablon DOM&#8217;dan kald\u0131r\u0131lmadan hemen \u00f6nce \u00e7al\u0131\u015f\u0131r. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in aboneliklerin veya olay dinleyicilerinin temizlenmesi i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p>Bu ya\u015fam d\u00f6ng\u00fcs\u00fc olaylar\u0131, \u015fablonun davran\u0131\u015f\u0131n\u0131 daha da hassas bir \u015fekilde kontrol etmeye olanak tan\u0131r. Olay haritalar\u0131 ise, bu ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn bir par\u00e7as\u0131 olarak, kullan\u0131c\u0131 etkile\u015fimlerini do\u011frudan yakalamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h3>Olay Haritalar\u0131 Temelleri<\/h3>\n<p>Meteor&#8217;da \u015fablon olay haritalar\u0131, kullan\u0131c\u0131 aray\u00fcz\u00fcndeki DOM olaylar\u0131na yan\u0131t vermek i\u00e7in kullan\u0131lan merkezi bir mekanizmad\u0131r. Bu yap\u0131, belirli bir \u015fablonla ili\u015fkili t\u00fcm olay i\u015fleyicilerini tek bir yerde toplar, bu da kodun okunabilirli\u011fini ve d\u00fczenini art\u0131r\u0131r.<\/p>\n<h4>Olay Haritas\u0131n\u0131n S\u00f6zdizimi<\/h4>\n<p>Bir \u015fablon i\u00e7in olay haritas\u0131, <code>Template.templateName.events({ ... });<\/code> s\u00f6zdizimi kullan\u0131larak tan\u0131mlan\u0131r. Burada <code>templateName<\/code>, olaylar\u0131 dinlemek istedi\u011finiz \u015fablonun ad\u0131d\u0131r. S\u00fcsl\u00fc parantezler i\u00e7ine, olay tan\u0131mlay\u0131c\u0131lar\u0131 ve bunlara kar\u015f\u0131l\u0131k gelen i\u015fleyici fonksiyonlar\u0131 yaz\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">Template.MyTemplate.events({\n  'click .action-button': function(event, instance) {\n    \/\/ .action-button s\u0131n\u0131f\u0131na sahip bir \u00f6\u011feye t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015facak kod\n    console.log('Butona t\u0131kland\u0131!');\n  },\n  'submit .data-form': function(event, instance) {\n    \/\/ .data-form s\u0131n\u0131f\u0131na sahip bir forma g\u00f6nderim yap\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015facak kod\n    event.preventDefault(); \/\/ Formun varsay\u0131lan g\u00f6nderimini engelle\n    const itemInput = instance.find('input[name=\"item\"]');\n    const itemValue = itemInput.value;\n    console.log('Yeni \u00f6\u011fe eklendi:', itemValue);\n    itemInput.value = ''; \/\/ Input'u temizle\n  }\n});<\/code><\/pre>\n<h4>Olay Tan\u0131mlay\u0131c\u0131lar\u0131: <code>event type selector<\/code><\/h4>\n<p>Her olay haritas\u0131 giri\u015fi, bir olay tan\u0131mlay\u0131c\u0131s\u0131 ve bir i\u015fleyici fonksiyondan olu\u015fur. Olay tan\u0131mlay\u0131c\u0131s\u0131, iki ana b\u00f6l\u00fcmden olu\u015fur:<\/p>\n<p>1.  <strong>Olay Tipi (Event Type):<\/strong> Bu, dinlemek istedi\u011finiz DOM olay\u0131n\u0131n ad\u0131d\u0131r. En yayg\u0131n olay tipleri \u015funlard\u0131r:<br \/>\n    *   <code>click<\/code>: Bir \u00f6\u011feye t\u0131kland\u0131\u011f\u0131nda.<br \/>\n    *   <code>dblclick<\/code>: Bir \u00f6\u011feye \u00e7ift t\u0131kland\u0131\u011f\u0131nda.<br \/>\n    *   <code>mousedown<\/code>, <code>mouseup<\/code>: Fare tu\u015funa bas\u0131ld\u0131\u011f\u0131nda veya b\u0131rak\u0131ld\u0131\u011f\u0131nda.<br \/>\n    *   <code>mouseenter<\/code>, <code>mouseleave<\/code>: Fare imleci bir \u00f6\u011fenin \u00fczerine geldi\u011finde veya ayr\u0131ld\u0131\u011f\u0131nda.<br \/>\n    *   <code>mousemove<\/code>: Fare imleci bir \u00f6\u011fe \u00fczerinde hareket etti\u011finde.<br \/>\n    *   <code>change<\/code>: Bir input, select veya textarea \u00f6\u011fesinin de\u011feri de\u011fi\u015fti\u011finde ve \u00f6\u011fe oda\u011f\u0131 kaybetti\u011finde (veya select durumunda hemen).<br \/>\n    *   <code>input<\/code>: Bir input veya textarea \u00f6\u011fesinin de\u011feri her de\u011fi\u015fti\u011finde (an\u0131nda).<br \/>\n    *   <code>focus<\/code>, <code>blur<\/code>: Bir \u00f6\u011fe odakland\u0131\u011f\u0131nda veya oda\u011f\u0131 kaybetti\u011finde.<br \/>\n    *   <code>keydown<\/code>, <code>keyup<\/code>, <code>keypress<\/code>: Bir klavye tu\u015funa bas\u0131ld\u0131\u011f\u0131nda, b\u0131rak\u0131ld\u0131\u011f\u0131nda veya bas\u0131l\u0131 tutuldu\u011funda.<br \/>\n    *   <code>submit<\/code>: Bir form g\u00f6nderildi\u011finde.<br \/>\n    *   <code>scroll<\/code>: Bir \u00f6\u011fe veya pencere kayd\u0131r\u0131ld\u0131\u011f\u0131nda.<br \/>\n    *   <code>touchstart<\/code>, <code>touchend<\/code>, <code>touchmove<\/code>: Dokunmatik ekran olaylar\u0131.<\/p>\n<p>2.  <strong>Se\u00e7ici (Selector):<\/strong> Bu, olay\u0131n dinlenece\u011fi HTML \u00f6\u011fesini belirten bir CSS se\u00e7icisidir. Se\u00e7iciler, standart CSS se\u00e7icileri gibi \u00e7al\u0131\u015f\u0131r ve <code>id<\/code>, <code>class<\/code>, etiket ad\u0131, \u00f6znitelik veya bunlar\u0131n kombinasyonlar\u0131n\u0131 kullanabilir.<br \/>\n    *   <code>#myId<\/code>: Belirli bir ID&#8217;ye sahip \u00f6\u011fe.<br \/>\n    *   <code>.myClass<\/code>: Belirli bir s\u0131n\u0131fa sahip \u00f6\u011feler.<br \/>\n    *   <code>button<\/code>: T\u00fcm <code>button<\/code> etiketleri.<br \/>\n    *   <code>input[type=\"text\"]<\/code>: <code>type<\/code> \u00f6zniteli\u011fi <code>text<\/code> olan t\u00fcm inputlar.<br \/>\n    *   <code>form .submit-button<\/code>: <code>form<\/code> i\u00e7indeki <code>.submit-button<\/code> s\u0131n\u0131f\u0131na sahip \u00f6\u011fe.<br \/>\n    *   Bo\u015f se\u00e7ici: Olay\u0131 do\u011frudan \u015fablonun k\u00f6k \u00f6\u011fesinde dinler. \u00d6rne\u011fin, <code>'click': function() { ... }<\/code> \u015fablonun kendisinin (yani <code><template name=\"MyTemplate\"><\/code> etiketinin i\u00e7indeki en d\u0131\u015f \u00f6\u011fenin) t\u0131klama olay\u0131n\u0131 dinler.<\/p>\n<h4>Olay \u0130\u015fleyici Fonksiyonu: <code>function(event, instance)<\/code><\/h4>\n<p>Her olay tan\u0131mlay\u0131c\u0131s\u0131na kar\u015f\u0131l\u0131k gelen bir JavaScript fonksiyonu bulunur. Bu fonksiyon iki arg\u00fcman al\u0131r:<\/p>\n<p>1.  <strong><code>event<\/code> Nesnesi:<\/strong> Bu, taray\u0131c\u0131n\u0131n standart DOM olay nesnesidir. Bir\u00e7ok yararl\u0131 \u00f6zellik ve y\u00f6ntem i\u00e7erir:<br \/>\n    *   <code>event.target<\/code>: Olay\u0131n orijinal olarak ger\u00e7ekle\u015fti\u011fi DOM \u00f6\u011fesi.<br \/>\n    *   <code>event.currentTarget<\/code>: Olay i\u015fleyicisinin eklendi\u011fi DOM \u00f6\u011fesi (genellikle <code>event.target<\/code> ile ayn\u0131d\u0131r, ancak olay delegasyonunda farkl\u0131l\u0131k g\u00f6sterebilir).<br \/>\n    *   <code>event.preventDefault()<\/code>: Olay\u0131n varsay\u0131lan taray\u0131c\u0131 davran\u0131\u015f\u0131n\u0131 engeller (\u00f6rne\u011fin, bir formun g\u00f6nderilmesini veya bir ba\u011flant\u0131n\u0131n takip edilmesini).<br \/>\n    *   <code>event.stopPropagation()<\/code>: Olay\u0131n DOM a\u011fac\u0131nda yukar\u0131 do\u011fru yay\u0131lmas\u0131n\u0131 (bubbling) durdurur.<br \/>\n    *   <code>event.data<\/code>: Bu \u00f6zellik Blaze&#8217;e \u00f6zg\u00fc de\u011fildir; ancak olay nesnesinin di\u011fer standart \u00f6zellikleri (\u00f6rne\u011fin, klavye olaylar\u0131 i\u00e7in <code>event.keyCode<\/code>, fare olaylar\u0131 i\u00e7in <code>event.clientX<\/code>) kullan\u0131labilir.<\/p>\n<p>2.  <strong><code>instance<\/code> Nesnesi:<\/strong> Bu, olay\u0131n ger\u00e7ekle\u015fti\u011fi \u015fablonun ge\u00e7erli \u00f6rne\u011fidir (<code>Template.instance()<\/code>). Bu nesne, \u015fablonun ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca tutulan verilere ve yard\u0131mc\u0131 y\u00f6ntemlere eri\u015fim sa\u011flar:<br \/>\n    *   <code>instance.data<\/code>: \u015eablona d\u0131\u015far\u0131dan ge\u00e7irilen verileri i\u00e7eren reaktif bir nesnedir (\u00f6rne\u011fin, <code>{{> MyTemplate item=currentItem}}<\/code> durumunda <code>instance.data.item<\/code>&#8216;e eri\u015filebilir).<br \/>\n    *   <code>instance.find(selector)<\/code>: \u015eablonun k\u00f6k \u00f6\u011fesi i\u00e7inde belirli bir se\u00e7iciye uyan ilk DOM \u00f6\u011fesini bulur.<br \/>\n    *   <code>instance.findAll(selector)<\/code>: \u015eablonun k\u00f6k \u00f6\u011fesi i\u00e7inde belirli bir se\u00e7iciye uyan t\u00fcm DOM \u00f6\u011felerini bulur ve bir NodeList d\u00f6nd\u00fcr\u00fcr.<br \/>\n    *   <code>instance.$(selector)<\/code>: <code>instance.find()<\/code> ile benzerdir, ancak jQuery nesnesi d\u00f6nd\u00fcr\u00fcr. Meteor&#8217;un varsay\u0131lan olarak jQuery&#8217;yi i\u00e7erdi\u011fini varsayar.<br \/>\n    *   <code>instance.autorun()<\/code>: \u015eablon \u00f6rne\u011fine ba\u011fl\u0131 reaktif hesaplamalar olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p>Bu iki arg\u00fcman sayesinde, olay i\u015fleyicileri hem olay\u0131n kendisi hakk\u0131nda detayl\u0131 bilgiye hem de \u015fablonun ge\u00e7erli durumuna ve i\u00e7eri\u011fine eri\u015febilir, bu da g\u00fc\u00e7l\u00fc ve esnek etkile\u015fimler yaratmaya olanak tan\u0131r.<\/p>\n<h3>Temel Olay Haritas\u0131 Kullan\u0131m\u0131 \u00d6rnekleri<\/h3>\n<p>\u015eablon olay haritalar\u0131, Meteor uygulamalar\u0131nda \u00e7e\u015fitli kullan\u0131c\u0131 etkile\u015fimlerini y\u00f6netmek i\u00e7in temel bir ara\u00e7t\u0131r. \u0130\u015fte baz\u0131 yayg\u0131n kullan\u0131m senaryolar\u0131 ve kod \u00f6rnekleri:<\/p>\n<h4>Basit Bir Buton T\u0131klamas\u0131<\/h4>\n<p>En temel kullan\u0131m, bir butona t\u0131kland\u0131\u011f\u0131nda belirli bir eylemi tetiklemektir.<\/p>\n<pre><code class=\"language-html\"><!-- myComponent.html -->\n<template name=\"MyComponent\">\n  <button class=\"say-hello-button\">Merhaba De<\/button>\n  <p>{{message}}<\/p>\n<\/template><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ myComponent.js\nimport { Template } from 'meteor\/templating';\nimport { ReactiveVar } from 'meteor\/reactive-var';\nimport '.\/myComponent.html';\n\nTemplate.MyComponent.onCreated(function() {\n  this.message = new ReactiveVar('Hen\u00fcz kimse merhaba demedi.');\n});\n\nTemplate.MyComponent.helpers({\n  message() {\n    return Template.instance().message.get();\n  }\n});\n\nTemplate.MyComponent.events({\n  'click .say-hello-button': function(event, instance) {\n    instance.message.set('Merhaba D\u00fcnya!');\n    console.log('Merhaba butonu t\u0131kland\u0131.');\n  }\n});<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>.say-hello-button<\/code> s\u0131n\u0131f\u0131na sahip butona t\u0131kland\u0131\u011f\u0131nda, \u015fablonun <code>message<\/code> ReactiveVar&#8217;\u0131 g\u00fcncellenir ve bu da <code>p<\/code> etiketindeki metni reaktif olarak de\u011fi\u015ftirir.<\/p>\n<h4>Form G\u00f6nderimi<\/h4>\n<p>Kullan\u0131c\u0131dan veri almak i\u00e7in formlar s\u0131k\u00e7a kullan\u0131l\u0131r. Form g\u00f6nderimini ele almak, genellikle varsay\u0131lan taray\u0131c\u0131 davran\u0131\u015f\u0131n\u0131 engellemeyi ve form verilerini i\u015flemeyi i\u00e7erir.<\/p>\n<pre><code class=\"language-html\"><!-- taskForm.html -->\n<template name=\"TaskForm\">\n  <form class=\"new-task-form\">\n    <input type=\"text\" name=\"text\" placeholder=\"Yeni g\u00f6rev ekle\">\n    <button type=\"submit\">Ekle<\/button>\n  <\/form>\n  <ul>\n    {{#each tasks}}\n      <li>{{text}}<\/li>\n    {{\/each}}\n  <\/ul>\n<\/template><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ taskForm.js\nimport { Template } from 'meteor\/templating';\nimport { TasksCollection } from '..\/api\/tasks'; \/\/ Varsay\u0131msal bir koleksiyon\nimport '.\/taskForm.html';\n\nTemplate.TaskForm.helpers({\n  tasks() {\n    return TasksCollection.find({});\n  }\n});\n\nTemplate.TaskForm.events({\n  'submit .new-task-form': function(event, instance) {\n    event.preventDefault(); \/\/ Formun varsay\u0131lan g\u00f6nderimini engelle\n\n    const target = event.target;\n    const text = target.text.value; \/\/ 'name=\"text\"' olan inputun de\u011ferini al\n\n    TasksCollection.insert({\n      text,\n      createdAt: new Date(),\n    });\n\n    target.text.value = ''; \/\/ Input'u temizle\n    console.log('Yeni g\u00f6rev eklendi:', text);\n  }\n});<\/code><\/pre>\n<p>Burada, form g\u00f6nderildi\u011finde <code>event.preventDefault()<\/code> \u00e7a\u011fr\u0131l\u0131r. Ard\u0131ndan, <code>event.target<\/code> \u00fczerinden form \u00f6\u011felerine eri\u015filerek input de\u011feri al\u0131n\u0131r ve <code>TasksCollection<\/code>&#8216;a yeni bir g\u00f6rev eklenir.<\/p>\n<h4>Input De\u011fi\u015fikliklerini \u0130zleme<\/h4>\n<p>Bir input alan\u0131n\u0131n de\u011feri de\u011fi\u015fti\u011finde an\u0131nda tepki vermek i\u00e7in <code>input<\/code> veya <code>change<\/code> olaylar\u0131 kullan\u0131labilir.<\/p>\n<pre><code class=\"language-html\"><!-- liveSearch.html -->\n<template name=\"LiveSearch\">\n  <input type=\"text\" class=\"search-input\" placeholder=\"Arama yap...\">\n  <p>Aranan kelime: {{searchQuery}}<\/p>\n<\/template><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ liveSearch.js\nimport { Template } from 'meteor\/templating';\nimport { ReactiveVar } from 'meteor\/reactive-var';\nimport '.\/liveSearch.html';\n\nTemplate.LiveSearch.onCreated(function() {\n  this.searchQuery = new ReactiveVar('');\n});\n\nTemplate.LiveSearch.helpers({\n  searchQuery() {\n    return Template.instance().searchQuery.get();\n  }\n});\n\nTemplate.LiveSearch.events({\n  'input .search-input': function(event, instance) {\n    const query = event.target.value;\n    instance.searchQuery.set(query);\n    console.log('Arama sorgusu:', query);\n    \/\/ Ger\u00e7ek bir uygulamada burada bir veritaban\u0131 sorgusu veya filtreleme yap\u0131labilir.\n  }\n});<\/code><\/pre>\n<p><code>input<\/code> olay\u0131, kullan\u0131c\u0131n\u0131n her tu\u015f vuru\u015funda tetiklenir, bu da canl\u0131 arama veya anl\u0131k geri bildirim i\u00e7in idealdir. <code>change<\/code> olay\u0131 ise input oda\u011f\u0131 kaybetti\u011finde veya bir selectbox&#8217;\u0131n de\u011feri de\u011fi\u015fti\u011finde tetiklenir.<\/p>\n<h4>Dinamik Veri ile Etkile\u015fim (<code>{{#each}}<\/code> D\u00f6ng\u00fcs\u00fc \u0130\u00e7inde)<\/h4>\n<p>Blaze&#8217;in <code>{{#each}}<\/code> d\u00f6ng\u00fcs\u00fc ile olu\u015fturulan dinamik listelerdeki her \u00f6\u011fe i\u00e7in olaylar\u0131 y\u00f6netmek, <code>this<\/code> anahtar kelimesinin ve <code>instance.data<\/code>&#8216;n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamay\u0131 gerektirir.<\/p>\n<pre><code class=\"language-html\"><!-- itemList.html -->\n<template name=\"ItemList\">\n  <ul>\n    {{#each items}}\n      {{> ItemCard item=this}}\n    {{\/each}}\n  <\/ul>\n<\/template>\n\n<template name=\"ItemCard\">\n  <li class=\"item-card\">\n    <span>{{item.name}}<\/span>\n    <button class=\"delete-item-button\" data-item-id=\"{{item._id}}\">Sil<\/button>\n  <\/li>\n<\/template><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ itemList.js\nimport { Template } from 'meteor\/templating';\nimport { ItemsCollection } from '..\/api\/items'; \/\/ Varsay\u0131msal bir koleksiyon\nimport '.\/itemList.html';\nimport '.\/itemCard.html'; \/\/ ItemCard \u015fablonunu import et\n\nTemplate.ItemList.helpers({\n  items() {\n    return ItemsCollection.find({});\n  }\n});\n\nTemplate.ItemCard.events({\n  'click .delete-item-button': function(event, instance) {\n    \/\/ this, ge\u00e7erli ItemCard \u015fablonunun veri ba\u011flam\u0131d\u0131r (yani item=this ile gelen item objesi)\n    \/\/ instance.data, ItemCard'a prop olarak ge\u00e7en item objesini i\u00e7erir.\n    const itemId = this.item._id; \/\/ this.item veya instance.data.item kullan\u0131labilir\n    \/\/ Veya data-item-id attribute'undan alabiliriz:\n    \/\/ const itemId = event.currentTarget.dataset.itemId;\n\n    ItemsCollection.remove(itemId);\n    console.log('\u00d6\u011fe silindi:', itemId);\n  }\n});<\/code><\/pre>\n<p><code>ItemCard<\/code> \u015fablonunun olay i\u015fleyicisi i\u00e7inde, <code>this<\/code> anahtar kelimesi, <code>{{#each items}}<\/code> d\u00f6ng\u00fcs\u00fcnden <code>ItemCard<\/code>&#8216;a ge\u00e7irilen her bir <code>item<\/code> nesnesini temsil eder. Bu, her bir liste \u00f6\u011fesinin kendi ba\u011flam\u0131na eri\u015fmesini ve ona \u00f6zg\u00fc eylemleri ger\u00e7ekle\u015ftirmesini sa\u011flar. Alternatif olarak, <code>data-<\/code> \u00f6znitelikleri kullan\u0131larak da veri aktar\u0131m\u0131 yap\u0131labilir.<\/p>\n<p>Bu temel \u00f6rnekler, \u015fablon olay haritalar\u0131n\u0131n Meteor uygulamalar\u0131nda kullan\u0131c\u0131 etkile\u015fimlerini nas\u0131l y\u00f6netti\u011fine dair sa\u011flam bir temel sunar. Geli\u015fmi\u015f teknikler ise bu temelin \u00fczerine in\u015fa edilir.<\/p>\n<h3>Geli\u015fmi\u015f Olay Haritas\u0131 Teknikleri<\/h3>\n<p>Meteor&#8217;daki olay haritalar\u0131, basit etkile\u015fimlerin \u00f6tesine ge\u00e7erek daha karma\u015f\u0131k senaryolar\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc \u00f6zellikler sunar. Bu b\u00f6l\u00fcmde, olay delegasyonu, veri ba\u011flam\u0131 eri\u015fimi ve reaktif veri ile etkile\u015fim gibi geli\u015fmi\u015f tekniklere odaklanaca\u011f\u0131z.<\/p>\n<h4>Delegasyon (Event Delegation)<\/h4>\n<p>Olay delegasyonu, performans ve bellek kullan\u0131m\u0131 a\u00e7\u0131s\u0131ndan \u00f6nemli bir optimizasyon tekni\u011fidir. \u00d6zellikle dinamik olarak eklenen veya kald\u0131r\u0131lan \u00f6\u011feler i\u00e7eren uzun listelerde faydal\u0131d\u0131r.<\/p>\n<p><strong>Neden \u00d6nemli?<\/strong><br \/>\nNormalde, bir olay i\u015fleyicisi do\u011frudan her bir DOM \u00f6\u011fesine eklenir. E\u011fer 1000 \u00f6\u011felik bir listeniz varsa, bu 1000 ayr\u0131 olay i\u015fleyicisi anlam\u0131na gelir, bu da bellek t\u00fcketimini art\u0131r\u0131r ve DOM manip\u00fclasyonlar\u0131n\u0131 yava\u015flatabilir. Olay delegasyonu ile, bu \u00f6\u011felerin ortak bir \u00fcst \u00f6\u011fesine tek bir olay i\u015fleyicisi eklersiniz.<\/p>\n<p><strong>Nas\u0131l Yap\u0131l\u0131r?<\/strong><br \/>\nMeteor&#8217;un olay haritalar\u0131, varsay\u0131lan olarak olay delegasyonunu kullan\u0131r. Bir olay tan\u0131mlay\u0131c\u0131s\u0131nda se\u00e7ici belirtti\u011finizde (\u00f6rne\u011fin, <code>'click .my-item'<\/code>), Meteor asl\u0131nda bu olay\u0131 \u015fablonun k\u00f6k \u00f6\u011fesinde dinler ve ard\u0131ndan olay\u0131n <code>target<\/code>&#8216;\u0131n\u0131n belirtilen se\u00e7iciyle e\u015fle\u015fip e\u015fle\u015fmedi\u011fini kontrol eder.<\/p>\n<pre><code class=\"language-html\"><!-- delegatedList.html -->\n<template name=\"DelegatedList\">\n  <ul class=\"item-list\">\n    {{#each items}}\n      <li class=\"list-item\" data-item-id=\"{{_id}}\">{{name}}<\/li>\n    {{\/each}}\n  <\/ul>\n  <button class=\"add-item\">Yeni \u00d6\u011fe Ekle<\/button>\n<\/template><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ delegatedList.js\nimport { Template } from 'meteor\/templating';\nimport { ReactiveVar } from 'meteor\/reactive-var';\nimport '.\/delegatedList.html';\n\nlet itemIdCounter = 0; \/\/ Basit bir ID sayac\u0131\n\nTemplate.DelegatedList.onCreated(function() {\n  this.items = new ReactiveVar([]);\n});\n\nTemplate.DelegatedList.helpers({\n  items() {\n    return Template.instance().items.get();\n  }\n});\n\nTemplate.DelegatedList.events({\n  'click .list-item': function(event, instance) {\n    \/\/ Olay i\u015fleyici, <ul> \u00fczerinde dinlenir, ancak yaln\u0131zca .list-item'a t\u0131kland\u0131\u011f\u0131nda tetiklenir.\n    const clickedItemId = event.currentTarget.dataset.itemId;\n    console.log('T\u0131klanan \u00f6\u011fe ID:', clickedItemId);\n    \/\/ 'this' burada t\u0131klanan .list-item'\u0131n veri ba\u011flam\u0131d\u0131r, e\u011fer bir {{#each}} i\u00e7indeyse.\n    \/\/ E\u011fer do\u011frudan bir helper'dan gelmiyorsa, <code>instance.data<\/code> bo\u015f olabilir.\n    \/\/ <code>event.currentTarget<\/code> her zaman olay\u0131 yakalayan \u00f6\u011feyi temsil eder.\n  },\n  'click .add-item': function(event, instance) {\n    itemIdCounter++;\n    const currentItems = instance.items.get();\n    instance.items.set([...currentItems, { _id: <code>item-${itemIdCounter}<\/code>, name: <code>\u00d6\u011fe ${itemIdCounter}<\/code> }]);\n  }\n});<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>click .list-item<\/code> olay\u0131 <code>DelegatedList<\/code> \u015fablonunun k\u00f6k \u00f6\u011fesi \u00fczerinde dinlenir. Yeni \u00f6\u011feler dinamik olarak eklense bile, bu tek olay i\u015fleyici t\u00fcm yeni \u00f6\u011feler i\u00e7in ge\u00e7erli olur. <code>event.currentTarget<\/code> \u00f6zelli\u011fi, olay\u0131 yakalayan (yani <code>list-item<\/code> s\u0131n\u0131f\u0131na sahip) \u00f6\u011feyi verirken, <code>event.target<\/code> olay\u0131n ba\u015flang\u0131\u00e7ta ger\u00e7ekle\u015fti\u011fi en derin \u00f6\u011feyi verir.<\/p>\n<h4>Veri Eri\u015fimi (Data Context)<\/h4>\n<p>Olay i\u015fleyicileri i\u00e7inde do\u011fru veri ba\u011flam\u0131na eri\u015fmek, etkile\u015fimlerinizi anlaml\u0131 hale getirmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<p>*   <strong><code>this<\/code> Anahtar Kelimesi:<\/strong> <code>{{#each}}<\/code>, <code>{{#with}}<\/code> gibi blok yard\u0131mc\u0131lar\u0131 i\u00e7inde tan\u0131mlanan bir \u015fablonun olay i\u015fleyicisinde <code>this<\/code>, o anki veri ba\u011flam\u0131n\u0131 temsil eder. \u00d6rne\u011fin, <code>{{#each items}} {{> ItemCard item=this}} {{\/each}}<\/code> i\u00e7inde <code>ItemCard<\/code>&#8216;\u0131n olay i\u015fleyicisinde <code>this<\/code>, d\u00f6ng\u00fcdeki mevcut <code>item<\/code> nesnesi olacakt\u0131r.<br \/>\n*   <strong><code>instance.data<\/code>:<\/strong> Bu, <code>Template.instance()<\/code> \u00fczerinden eri\u015filebilen ve \u015fablona d\u0131\u015far\u0131dan prop olarak ge\u00e7irilen verileri i\u00e7eren reaktif bir nesnedir. Yukar\u0131daki <code>ItemCard<\/code> \u00f6rne\u011finde, <code>instance.data.item<\/code> de ayn\u0131 <code>item<\/code> nesnesine eri\u015fim sa\u011flar. <code>instance.data<\/code> genellikle <code>onCreated<\/code> veya <code>onRendered<\/code> i\u00e7inde initial state ayarlarken kullan\u0131l\u0131r.<br \/>\n*   <strong><code>event.currentTarget.dataset<\/code>:<\/strong> HTML5 <code>data-<\/code> \u00f6znitelikleri, DOM \u00f6\u011felerine \u00f6zel veriler eklemek i\u00e7in m\u00fckemmel bir yoldur. Olay i\u015fleyicileri i\u00e7inde <code>event.currentTarget.dataset.yourAttributeName<\/code> ile bu verilere eri\u015filebilir. Bu, \u00f6zellikle bir koleksiyondaki bir \u00f6\u011fenin ID&#8217;sini bir butona ekleyip daha sonra bu ID&#8217;yi kullanarak i\u015flem yapmak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h4>Reaktif Veri ile Etkile\u015fim<\/h4>\n<p>Meteor&#8217;un g\u00fcc\u00fc, reaktif veri ak\u0131\u015f\u0131nda yatar. Olay i\u015fleyicileri, Session, ReactiveVar veya koleksiyonlarla (MongoDB) etkile\u015fime girerek UI&#8217;\u0131 reaktif olarak g\u00fcncelleyebilir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ example.js\nimport { Template } from 'meteor\/templating';\nimport { Session } from 'meteor\/session';\nimport { ReactiveVar } from 'meteor\/reactive-var';\nimport { MyCollection } from '..\/api\/myCollection'; \/\/ Varsay\u0131msal koleksiyon\n\nTemplate.MyReactiveTemplate.onCreated(function() {\n  this.counter = new ReactiveVar(0);\n});\n\nTemplate.MyReactiveTemplate.helpers({\n  currentCounter() {\n    return Template.instance().counter.get();\n  },\n  sessionValue() {\n    return Session.get('mySessionKey');\n  },\n  collectionCount() {\n    return MyCollection.find({ status: 'active' }).count();\n  }\n});\n\nTemplate.MyReactiveTemplate.events({\n  'click .increment-reactive-var': function(event, instance) {\n    instance.counter.set(instance.counter.get() + 1);\n  },\n  'click .set-session': function() {\n    Session.set('mySessionKey', 'Yeni Oturum De\u011feri');\n  },\n  'click .add-to-collection': function() {\n    MyCollection.insert({ name: 'Yeni \u00d6\u011fe', status: 'active', createdAt: new Date() });\n  }\n});<\/code><\/pre>\n<p>Bu \u00f6rnekte, olay i\u015fleyicileri ReactiveVar, Session ve bir koleksiyonu g\u00fcncelleyerek UI&#8217;daki ilgili yard\u0131mc\u0131 fonksiyonlar\u0131n reaktif olarak yeniden \u00e7al\u0131\u015fmas\u0131n\u0131 ve aray\u00fcz\u00fcn g\u00fcncellenmesini sa\u011flar.<\/p>\n<h4>Olay Zincirini Durdurma: <code>event.preventDefault()<\/code> ve <code>event.stopPropagation()<\/code><\/h4>\n<p>*   <strong><code>event.preventDefault()<\/code>:<\/strong> Bir olay\u0131n varsay\u0131lan taray\u0131c\u0131 davran\u0131\u015f\u0131n\u0131 engeller. \u00d6rne\u011fin, bir <code><a><\/code> etiketine t\u0131kland\u0131\u011f\u0131nda sayfan\u0131n yeniden y\u00fcklenmesini, bir <code><\/p>\n<form><\/code> g\u00f6nderildi\u011finde sayfan\u0131n yenilenmesini veya bir checkbox&#8217;a t\u0131kland\u0131\u011f\u0131nda i\u015faretlenmesini engellemek i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong><code>event.stopPropagation()<\/code>:<\/strong> Bir olay\u0131n DOM a\u011fac\u0131nda yukar\u0131 do\u011fru yay\u0131lmas\u0131n\u0131 (bubbling) durdurur. \u00d6rne\u011fin, i\u00e7 i\u00e7e ge\u00e7mi\u015f iki \u00f6\u011feniz varsa ve her ikisinin de t\u0131klama i\u015fleyicisi varsa, i\u00e7teki \u00f6\u011feye t\u0131kland\u0131\u011f\u0131nda d\u0131\u015ftaki \u00f6\u011fenin i\u015fleyicisinin de tetiklenmesini engellemek i\u00e7in kullan\u0131labilir.<\/p>\n<pre><code class=\"language-html\"><!-- nestedEvents.html -->\n<template name=\"NestedEvents\">\n  <div class=\"outer-div\">\n    <p>D\u0131\u015f Alan<\/p>\n    <button class=\"inner-button\">\u0130\u00e7 Buton<\/button>\n  <\/div>\n  <a href=\"http:\/\/example.com\" class=\"prevent-link\">Beni T\u0131kla (Sayfa Yenilenmez)<\/a>\n<\/template><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ nestedEvents.js\nimport { Template } from 'meteor\/templating';\nimport '.\/nestedEvents.html';\n\nTemplate.NestedEvents.events({\n  'click .outer-div': function() {\n    console.log('D\u0131\u015f alana t\u0131kland\u0131.');\n  },\n  'click .inner-button': function(event) {\n    event.stopPropagation(); \/\/ Olay\u0131n outer-div'e yay\u0131lmas\u0131n\u0131 engelle\n    console.log('\u0130\u00e7 butona t\u0131kland\u0131.');\n  },\n  'click .prevent-link': function(event) {\n    event.preventDefault(); \/\/ Ba\u011flant\u0131n\u0131n varsay\u0131lan davran\u0131\u015f\u0131n\u0131 (sayfaya gitmeyi) engelle\n    console.log('Ba\u011flant\u0131ya t\u0131kland\u0131, ancak sayfa yenilenmedi.');\n  }\n});<\/code><\/pre>\n<p>Bu iki y\u00f6ntem, olay ak\u0131\u015f\u0131n\u0131 hassas bir \u015fekilde kontrol etmek i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\n<h4>Birden Fazla Olay \u0130\u015fleyici<\/h4>\n<p>Ayn\u0131 se\u00e7iciye birden fazla olay tipi atamak m\u00fcmk\u00fcnd\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">Template.MyTemplate.events({\n  'mouseenter .hover-area, mouseleave .hover-area': function(event) {\n    if (event.type === 'mouseenter') {\n      console.log('Fare i\u00e7eri girdi.');\n    } else if (event.type === 'mouseleave') {\n      console.log('Fare d\u0131\u015far\u0131 \u00e7\u0131kt\u0131.');\n    }\n  },\n  'click .my-element, dblclick .my-element': function(event) {\n    if (event.type === 'click') {\n      console.log('Tek t\u0131klama.');\n    } else if (event.type === 'dblclick') {\n      console.log('\u00c7ift t\u0131klama.');\n    }\n  }\n});<\/code><\/pre>\n<p>Bu teknik, belirli bir \u00f6\u011fe \u00fczerindeki farkl\u0131 ancak ili\u015fkili olaylar\u0131 tek bir i\u015fleyici i\u00e7inde ele almak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<p>Bu geli\u015fmi\u015f teknikler, Meteor geli\u015ftiricilerinin daha esnek, performansl\u0131 ve karma\u015f\u0131k kullan\u0131c\u0131 etkile\u015fimlerini kolayca y\u00f6netebilmelerini sa\u011flar.<\/p>\n<h3>Olay Haritalar\u0131n\u0131n Avantajlar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n<p>Meteor&#8217;daki \u015fablon olay haritalar\u0131, uygulamalar\u0131n etkile\u015fim katman\u0131n\u0131 olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ve verimli bir yol sunar. Bu yap\u0131n\u0131n sa\u011flad\u0131\u011f\u0131 avantajlar\u0131 ve geli\u015ftirme s\u00fcrecini daha da iyile\u015ftirecek en iyi uygulamalar\u0131 anlamak, daha sa\u011flam ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<h4>Avantajlar\u0131<\/h4>\n<p>1.  <strong>Mod\u00fclerlik ve Okunabilirlik:<\/strong> Olay haritalar\u0131, belirli bir \u015fablonla ilgili t\u00fcm olay i\u015fleyicilerini tek bir JavaScript dosyas\u0131nda toplar. Bu, bir bile\u015fenin hem g\u00f6rsel (HTML) hem de davran\u0131\u015fsal (JavaScript) mant\u0131\u011f\u0131n\u0131n kolayca bulunmas\u0131n\u0131 ve anla\u015f\u0131lmas\u0131n\u0131 sa\u011flar. Kod, ilgili \u015fablonla birlikte mod\u00fcler bir birim olarak kal\u0131r.<br \/>\n2.  <strong>Performans (Delegasyon Sayesinde):<\/strong> Meteor&#8217;un olay haritalar\u0131, varsay\u0131lan olarak olay delegasyonunu kullan\u0131r. Bu, \u00f6zellikle dinamik olarak eklenen veya kald\u0131r\u0131lan \u00e7ok say\u0131da \u00f6\u011fenin oldu\u011fu listelerde, her bir \u00f6\u011feye ayr\u0131 ayr\u0131 olay dinleyicisi eklemek yerine, \u00fcst \u00f6\u011feye tek bir dinleyici ekleyerek bellek kullan\u0131m\u0131n\u0131 ve DOM manip\u00fclasyonlar\u0131n\u0131 optimize eder.<br \/>\n3.  <strong>Kodun Bak\u0131m\u0131 ve Y\u00f6netimi Kolayl\u0131\u011f\u0131:<\/strong> Olay i\u015fleyicileri do\u011frudan \u015fablonla ili\u015fkilendirildi\u011fi i\u00e7in, bir \u015fablonu de\u011fi\u015ftirdi\u011finizde veya kald\u0131rd\u0131\u011f\u0131n\u0131zda, ilgili olay mant\u0131\u011f\u0131n\u0131 da kolayca bulup g\u00fcncelleyebilir veya kald\u0131rabilirsiniz. Bu, &#8220;spaghetti kodu&#8221; olu\u015fumunu engeller ve uzun vadeli bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<br \/>\n4.  <strong>Reaktif Yap\u0131 ile Entegrasyon:<\/strong> Olay i\u015fleyicileri i\u00e7inde <code>Template.instance()<\/code>, <code>ReactiveVar<\/code>, <code>Session<\/code> veya koleksiyonlar gibi Meteor&#8217;un reaktif veri kaynaklar\u0131n\u0131 kolayca kullanabilirsiniz. Bu, kullan\u0131c\u0131 etkile\u015fimlerinin do\u011frudan uygulaman\u0131n reaktif veri ak\u0131\u015f\u0131na entegre edilmesini ve UI&#8217;\u0131n otomatik olarak g\u00fcncellenmesini sa\u011flar.<br \/>\n5.  <strong>Temiz ve Bildirimsel S\u00f6zdizimi:<\/strong> <code>event type selector<\/code> \u015feklindeki s\u00f6zdizimi, hangi olay\u0131n hangi \u00f6\u011fe \u00fczerinde dinlendi\u011fini a\u00e7\u0131k\u00e7a belirtir. Bu bildirimsel yakla\u015f\u0131m, kodun amac\u0131n\u0131 h\u0131zl\u0131ca anlamay\u0131 sa\u011flar.<\/p>\n<h4>En \u0130yi Uygulamalar<\/h4>\n<p>1.  <strong>Anlaml\u0131 Se\u00e7iciler Kullanma:<\/strong> Se\u00e7icilerinizi (<code>.my-button<\/code>, <code>#my-form<\/code>) anla\u015f\u0131l\u0131r ve spesifik tutun. Genel se\u00e7icilerden (<code>div<\/code>, <code>p<\/code>) ka\u00e7\u0131n\u0131n, \u00e7\u00fcnk\u00fc bu, beklenmedik yan etkilere veya performans sorunlar\u0131na yol a\u00e7abilir. S\u0131n\u0131f tabanl\u0131 se\u00e7iciler (<code>.action-button<\/code>) genellikle ID tabanl\u0131 se\u00e7icilerden (<code>#actionButton<\/code>) daha esnektir, \u00e7\u00fcnk\u00fc s\u0131n\u0131flar birden fazla \u00f6\u011fede kullan\u0131labilir.<br \/>\n2.  <strong>Olay \u0130\u015fleyicilerini K\u0131sa ve Odakl\u0131 Tutma:<\/strong> Bir olay i\u015fleyicisinin tek bir sorumlulu\u011fu olmal\u0131d\u0131r. Karma\u015f\u0131k mant\u0131\u011f\u0131 veya birden fazla ad\u0131m\u0131 i\u00e7eren i\u015flemleri, ayr\u0131 yard\u0131mc\u0131 fonksiyonlara veya metodlara ay\u0131r\u0131n. Bu, test edilebilirli\u011fi ve okunabilirli\u011fi art\u0131r\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ K\u00f6t\u00fc \u00f6rnek:\n    'click .save-button': function(event, instance) {\n      \/\/ Form verilerini al\n      \/\/ Verileri do\u011frula\n      \/\/ Veritaban\u0131na kaydet\n      \/\/ Kullan\u0131c\u0131ya bildirim g\u00f6ster\n      \/\/ UI'\u0131 g\u00fcncelle\n    }\n\n    \/\/ \u0130yi \u00f6rnek:\n    'click .save-button': function(event, instance) {\n      const data = instance.getFormData(); \/\/ Yard\u0131mc\u0131 fonksiyon\n      if (instance.validateData(data)) { \/\/ Yard\u0131mc\u0131 fonksiyon\n        instance.saveToDatabase(data); \/\/ Yard\u0131mc\u0131 fonksiyon\n        instance.showNotification('Veriler kaydedildi.');\n        instance.updateUI();\n      } else {\n        instance.showNotification('Do\u011frulama hatas\u0131!', 'error');\n      }\n    }<\/code><\/pre>\n<p>3.  <strong>Karma\u015f\u0131k Mant\u0131\u011f\u0131 Yard\u0131mc\u0131 Fonksiyonlara Ay\u0131rma:<\/strong> \u015eablonun <code>helpers<\/code> b\u00f6l\u00fcm\u00fcnde veya do\u011frudan \u015fablonun <code>.js<\/code> dosyas\u0131nda tan\u0131mlanan yard\u0131mc\u0131 fonksiyonlar, olay i\u015fleyicilerindeki karma\u015f\u0131kl\u0131\u011f\u0131 azaltmaya yard\u0131mc\u0131 olur. Bu fonksiyonlar, i\u015f mant\u0131\u011f\u0131n\u0131 soyutlar ve tekrar kullan\u0131labilirli\u011fi art\u0131r\u0131r.<br \/>\n4.  <strong>Olay Delegasyonunu Do\u011fru Kullanma:<\/strong> Meteor&#8217;un otomatik delegasyonu harika olsa da, bazen belirli senaryolarda bilin\u00e7li olarak daha spesifik delegasyon stratejileri uygulaman\u0131z gerekebilir. \u00d6rne\u011fin, \u00e7ok b\u00fcy\u00fck bir tablonuz varsa ve her h\u00fccreye ayr\u0131 bir olay dinleyicisi eklemek istemiyorsan\u0131z, tablo g\u00f6vdesine tek bir dinleyici ekleyip h\u00fccre t\u0131klamalar\u0131n\u0131 yakalayabilirsiniz.<br \/>\n5.  <strong><code>event.preventDefault()<\/code> ve <code>event.stopPropagation()<\/code>&#8216;\u0131 Bilin\u00e7li Kullanma:<\/strong> Bu y\u00f6ntemleri yaln\u0131zca ger\u00e7ekten ihtiya\u00e7 duyuldu\u011funda kullan\u0131n. Gereksiz yere kullanmak, uygulaman\u0131z\u0131n beklenen taray\u0131c\u0131 davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmesine ve hatalara yol a\u00e7mas\u0131na neden olabilir. \u00d6zellikle <code>event.stopPropagation()<\/code> dikkatli kullan\u0131lmal\u0131d\u0131r, \u00e7\u00fcnk\u00fc di\u011fer bile\u015fenlerin veya k\u00fct\u00fcphanelerin bekledi\u011fi olaylar\u0131 engelleyebilir.<br \/>\n6.  <strong>G\u00fcvenlik (Kullan\u0131c\u0131 Girdisini Do\u011frulama):<\/strong> Olay i\u015fleyicilerinden gelen kullan\u0131c\u0131 girdisini asla do\u011frudan veritaban\u0131na kaydetmeyin veya hassas i\u015flemlerde kullanmay\u0131n. Her zaman sunucu taraf\u0131nda (Meteor metodlar\u0131 i\u00e7inde) girdi do\u011frulamas\u0131n\u0131 ve sanitizasyonunu yap\u0131n. Olay i\u015fleyicileri genellikle istemci taraf\u0131nda \u00e7al\u0131\u015f\u0131r ve istemci taraf\u0131 do\u011frulamas\u0131 yaln\u0131zca kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7indir, g\u00fcvenlik i\u00e7in de\u011fildir.<br \/>\n7.  <strong><code>Template.instance()<\/code> Kullan\u0131m\u0131:<\/strong> \u015eablona \u00f6zg\u00fc reaktif durumlar\u0131 veya DOM referanslar\u0131n\u0131 y\u00f6netmek i\u00e7in <code>Template.instance()<\/code> i\u00e7indeki de\u011fi\u015fkenleri veya y\u00f6ntemleri kullan\u0131n. Global de\u011fi\u015fkenlerden veya DOM&#8217;u do\u011frudan sorgulamaktan ka\u00e7\u0131n\u0131n. Bu, bile\u015fenlerinizi izole ve yeniden kullan\u0131labilir yapar.<\/p>\n<p>Bu avantajlar ve en iyi uygulamalar, Meteor geli\u015ftiricilerinin \u015fablon olay haritalar\u0131n\u0131 kullanarak daha d\u00fczenli, verimli ve bak\u0131m\u0131 kolay uygulamalar olu\u015fturmas\u0131na olanak tan\u0131r. Do\u011fru bir yakla\u015f\u0131mla, olay haritalar\u0131, uygulaman\u0131z\u0131n etkile\u015fim katman\u0131n\u0131n omurgas\u0131n\u0131 olu\u015fturabilir.<\/p>\n<h3>Alternatifler ve Gelecek<\/h3>\n<p>Meteor&#8217;un ilk zamanlar\u0131nda Blaze ve onun \u015fablon olay haritalar\u0131, reaktif kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in temel bir ara\u00e7t\u0131. Ancak web geli\u015ftirme ekosistemi s\u00fcrekli evriliyor ve yeni k\u00fct\u00fcphaneler ve \u00e7er\u00e7eveler ortaya \u00e7\u0131k\u0131yor. Bu b\u00f6l\u00fcmde, Blaze&#8217;in olay y\u00f6netimi yakla\u015f\u0131m\u0131n\u0131 di\u011fer pop\u00fcler UI k\u00fct\u00fcphaneleriyle k\u0131saca kar\u015f\u0131la\u015ft\u0131racak ve Meteor ekosistemindeki gelecekteki yerini de\u011ferlendirece\u011fiz.<\/p>\n<h4>Di\u011fer UI K\u00fct\u00fcphanelerinde Olay Y\u00f6netimi<\/h4>\n<p>1.  <strong>React:<\/strong> React, sanal DOM kullanarak bile\u015fen tabanl\u0131 bir mimariye sahiptir. Olaylar, JSX i\u00e7inde do\u011frudan bile\u015fenlere prop olarak ge\u00e7irilen fonksiyonlar arac\u0131l\u0131\u011f\u0131yla y\u00f6netilir. \u00d6rne\u011fin, <code><button onClick={handleClick}>T\u0131kla<\/button><\/code>. React, olaylar\u0131 sentezlenmi\u015f olay nesneleri arac\u0131l\u0131\u011f\u0131yla ele al\u0131r, bu da taray\u0131c\u0131lar aras\u0131 tutarl\u0131l\u0131k sa\u011flar. Delegasyon React&#8217;in kendisi taraf\u0131ndan otomatik olarak yap\u0131l\u0131r.<br \/>\n2.  <strong>Vue.js:<\/strong> Vue.js de bile\u015fen tabanl\u0131d\u0131r ve olaylar\u0131 <code>v-on<\/code> direktifi veya <code>@<\/code> k\u0131sayolu ile y\u00f6netir. \u00d6rne\u011fin, <code><button @click=\"handleClick\">T\u0131kla<\/button><\/code>. Vue, olay modifikat\u00f6rleri (<code>.prevent<\/code>, <code>.stop<\/code>, <code>.once<\/code> gibi) sunarak olay i\u015fleyicilerinin davran\u0131\u015f\u0131n\u0131 daha da kolayla\u015ft\u0131ran ek bir soyutlama katman\u0131 sa\u011flar.<br \/>\n3.  <strong>Angular:<\/strong> Angular, \u015fablonlar\u0131nda <code>(event)<\/code> s\u00f6zdizimi ile olaylar\u0131 dinler. \u00d6rne\u011fin, <code><button (click)=\"handleClick()\">T\u0131kla<\/button><\/code>. Angular, bile\u015fen tabanl\u0131 bir yakla\u015f\u0131ma sahiptir ve olay i\u015fleyicileri bile\u015fenin TypeScript s\u0131n\u0131f\u0131nda tan\u0131mlan\u0131r.<\/p>\n<p><strong>Kar\u015f\u0131la\u015ft\u0131rma:<\/strong><br \/>\nMeteor&#8217;un \u015fablon olay haritalar\u0131, se\u00e7ici tabanl\u0131 bir yakla\u015f\u0131mla \u00e7al\u0131\u015f\u0131rken, React, Vue ve Angular gibi modern k\u00fct\u00fcphaneler genellikle bile\u015fen tabanl\u0131 bir yakla\u015f\u0131mla olaylar\u0131 do\u011frudan bile\u015fenlere ba\u011flar. Meteor&#8217;daki se\u00e7ici tabanl\u0131 delegasyon, \u00f6zellikle karma\u015f\u0131k DOM yap\u0131lar\u0131 veya dinamik listeler i\u00e7in g\u00fc\u00e7l\u00fc ve verimli bir \u00e7\u00f6z\u00fcm sunar. Di\u011fer k\u00fct\u00fcphanelerde delegasyon genellikle \u00e7er\u00e7evenin kendisi taraf\u0131ndan soyutlan\u0131r ve geli\u015ftiricinin bu detaylarla do\u011frudan u\u011fra\u015fmas\u0131 gerekmez. Ancak, Meteor&#8217;un olay haritalar\u0131, se\u00e7icilerin esnekli\u011fi sayesinde, belirli bir DOM d\u00fc\u011f\u00fcm\u00fcn\u00fc hedeflemede olduk\u00e7a g\u00fc\u00e7l\u00fcd\u00fcr.<\/p>\n<h4>Meteor&#8217;un Blaze D\u0131\u015f\u0131ndaki UI Se\u00e7enekleri<\/h4>\n<p>Meteor, y\u0131llar i\u00e7inde yaln\u0131zca Blaze ile s\u0131n\u0131rl\u0131 kalmam\u0131\u015ft\u0131r. Topluluk ve Meteor Development Group (MDG) taraf\u0131ndan yap\u0131lan entegrasyonlar sayesinde, geli\u015ftiriciler art\u0131k Meteor uygulamalar\u0131nda React, Vue veya Angular gibi di\u011fer pop\u00fcler UI k\u00fct\u00fcphanelerini de kullanabilirler. Bu, Meteor&#8217;un sadece bir arka u\u00e7 \u00e7er\u00e7evesi olarak de\u011fil, ayn\u0131 zamanda farkl\u0131 \u00f6n u\u00e7 k\u00fct\u00fcphaneleriyle uyumlu bir tam y\u0131\u011f\u0131n platformu olarak konumlanmas\u0131n\u0131 sa\u011flam\u0131\u015ft\u0131r.<\/p>\n<p>Bu entegrasyonlar, Meteor&#8217;un reaktif veri katman\u0131n\u0131 (Tracker, Collections, Methods) bu k\u00fct\u00fcphanelerin bile\u015fen yap\u0131lar\u0131yla birle\u015ftirmeyi m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, <code>react-meteor-data<\/code> paketi, React bile\u015fenlerinin Meteor&#8217;un reaktif veri kaynaklar\u0131na kolayca ba\u011flanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>Olay Haritalar\u0131n\u0131n Hala Meteor\/Blaze Uygulamalar\u0131nda Temel Bir Yap\u0131 Ta\u015f\u0131 Oldu\u011fu<\/h4>\n<p>Meteor ekosisteminde React veya Vue gibi alternatifler pop\u00fclerlik kazanm\u0131\u015f olsa da, Blaze hala bir\u00e7ok mevcut Meteor uygulamas\u0131n\u0131n temelini olu\u015fturmaktad\u0131r. \u00d6zellikle, Blaze ile geli\u015ftirilmi\u015f eski uygulamalar\u0131n bak\u0131m\u0131 ve yeni \u00f6zelliklerin eklenmesi i\u00e7in \u015fablon olay haritalar\u0131 vazge\u00e7ilmezdir. Ayr\u0131ca, baz\u0131 geli\u015ftiriciler Blaze&#8217;in basitli\u011fini ve Meteor ile olan s\u0131k\u0131 entegrasyonunu tercih etmeye devam etmektedir.<\/p>\n<p>Meteor&#8217;un kendi reaktif motoru olan Tracker ile Blaze&#8217;in olay haritalar\u0131n\u0131n do\u011fal entegrasyonu, h\u0131zl\u0131 prototipleme ve ger\u00e7ek zamanl\u0131 uygulamalar i\u00e7in hala \u00e7ok g\u00fc\u00e7l\u00fc bir kombinasyondur. Bu nedenle, Meteor geli\u015ftiricileri i\u00e7in \u015fablon olay haritalar\u0131n\u0131 anlamak ve ustaca kullanmak, hem mevcut projeleri y\u00f6netmek hem de yeni Blaze tabanl\u0131 bile\u015fenler olu\u015fturmak i\u00e7in temel bir beceri olmaya devam edecektir. Gelecekte, Meteor&#8217;un esnekli\u011fi sayesinde, geli\u015ftiriciler ihtiya\u00e7lar\u0131na en uygun UI k\u00fct\u00fcphanesini se\u00e7me \u00f6zg\u00fcrl\u00fc\u011f\u00fcne sahip olacaklard\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Meteor&#8217;da \u015fablon olay haritalar\u0131, reaktif ve dinamik web uygulamalar\u0131 geli\u015ftirmek i\u00e7in temel bir ara\u00e7t\u0131r. Kullan\u0131c\u0131 etkile\u015fimlerini y\u00f6netme bi\u00e7imleri, uygulaman\u0131n genel kullan\u0131c\u0131 deneyimini, performans\u0131n\u0131 ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 do\u011frudan etkiler. Bu makalede ele ald\u0131\u011f\u0131m\u0131z gibi, olay haritalar\u0131, basit buton t\u0131klamalar\u0131ndan karma\u015f\u0131k form g\u00f6nderimlerine ve dinamik liste etkile\u015fimlerine kadar geni\u015f bir yelpazedeki senaryolar\u0131 ele alabilir.<\/p>\n<p>Olay haritalar\u0131n\u0131n mod\u00fcler yap\u0131s\u0131, kodun ilgili \u015fablonla birlikte d\u00fczenli bir \u015fekilde paketlenmesini sa\u011flar, bu da okunabilirli\u011fi ve bak\u0131m\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Meteor&#8217;un yerle\u015fik olay delegasyonu mekanizmas\u0131, \u00f6zellikle b\u00fcy\u00fck ve dinamik listelerde performans avantajlar\u0131 sunarken, <code>event<\/code> ve <code>instance<\/code> nesneleri arac\u0131l\u0131\u011f\u0131yla sa\u011flanan kapsaml\u0131 bilgi eri\u015fimi, geli\u015ftiricilere olay i\u015fleyicileri i\u00e7inde g\u00fc\u00e7l\u00fc ve esnek mant\u0131k olu\u015fturma yetene\u011fi verir. <code>this<\/code> anahtar kelimesi ve <code>instance.data<\/code> ile veri ba\u011flam\u0131na eri\u015fim, reaktif veri kaynaklar\u0131yla (Session, ReactiveVar, Collections) sorunsuz entegrasyon, <code>event.preventDefault()<\/code> ve <code>event.stopPropagation()<\/code> gibi kontrol mekanizmalar\u0131, olay haritalar\u0131n\u0131 Meteor geli\u015ftiricileri i\u00e7in vazge\u00e7ilmez k\u0131lar.<\/p>\n<p>En iyi uygulamalar\u0131 takip etmek \u2013 anlaml\u0131 se\u00e7iciler kullanmak, olay i\u015fleyicilerini k\u0131sa ve odakl\u0131 tutmak, karma\u015f\u0131k mant\u0131\u011f\u0131 yard\u0131mc\u0131 fonksiyonlara ay\u0131rmak ve g\u00fcvenlik hususlar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak \u2013 daha sa\u011flam, verimli ve s\u00fcrd\u00fcr\u00fclebilir Meteor uygulamalar\u0131 olu\u015fturman\u0131n anahtar\u0131d\u0131r.<\/p>\n<p>Meteor ekosistemi React, Vue ve Angular gibi alternatif UI k\u00fct\u00fcphaneleriyle geni\u015flemi\u015f olsa da, Blaze ve onun \u015fablon olay haritalar\u0131, mevcut bir\u00e7ok Meteor uygulamas\u0131n\u0131n kalbinde yer almaya devam etmektedir. Bu nedenle, Meteor geli\u015ftiricileri i\u00e7in bu g\u00fc\u00e7l\u00fc arac\u0131 tam potansiyeliyle kullanmak, sadece mevcut projeleri y\u00f6netmek i\u00e7in de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131larla daha anlaml\u0131 ve etkile\u015fimli deneyimler sunan dinamik uygulamalar in\u015fa etmek i\u00e7in de kritik bir beceridir. \u015eablon olay haritalar\u0131, Meteor&#8217;un reaktif felsefesinin bir uzant\u0131s\u0131 olarak, web geli\u015ftirmenin gelece\u011finde kullan\u0131c\u0131 merkezli etkile\u015fimlerin \u015fekillenmesinde \u00f6nemli bir rol oynamaya devam edecektir.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Meteor&#8217;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler\nGiri\u015f\nModern web uygulamalar\u0131, kullan\u0131c\u0131larla s\u00fcrekli etkile\u015fim","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-38517","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Meteor&#039;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Meteor&#039;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler\" \/>\n<meta property=\"og:description\" content=\"Meteor&#039;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler Giri\u015f Modern web uygulamalar\u0131, kullan\u0131c\u0131larla s\u00fcrekli etkile\u015fim\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-01T20:40:58+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Meteor&#8217;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler\",\"datePublished\":\"2026-02-01T20:40:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/\"},\"wordCount\":4052,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/\",\"name\":\"Meteor'da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-01T20:40:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Meteor&#8217;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Meteor'da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/","og_locale":"tr_TR","og_type":"article","og_title":"Meteor'da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler","og_description":"Meteor'da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler Giri\u015f Modern web uygulamalar\u0131, kullan\u0131c\u0131larla s\u00fcrekli etkile\u015fim","og_url":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-01T20:40:58+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"26 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Meteor&#8217;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler","datePublished":"2026-02-01T20:40:58+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/"},"wordCount":4052,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/","url":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/","name":"Meteor'da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-01T20:40:58+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/meteorda-sablon-olay-haritalari-dinamik-ve-yonetilebilir-etkilesimler\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Meteor&#8217;da \u015eablon Olay Haritalar\u0131: Dinamik ve Y\u00f6netilebilir Etkile\u015fimler"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=38517"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38517\/revisions"}],"predecessor-version":[{"id":38518,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38517\/revisions\/38518"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}