<\/div>\n
Bu yaz\u0131m\u0131zda KnockoutJS mimarisinde Event(Olay) fonksiyonu olu\u015fturmay\u0131 g\u00f6rece\u011fiz.E\u011fer takip\u00e7imseniz y\u00fcksek ihtimal anlam\u0131\u015fs\u0131n\u0131zd\u0131r ki, ben bir konuyu ya da yap\u0131y\u0131 genellikle senaryoland\u0131rmadan yaz\u0131ya d\u00f6kmeyi sevmem.O y\u00fczden bu basit i\u015flem i\u00e7inde k\u00fc\u00e7\u00fck bir senaryo tasarlad\u0131m.\u015eimdi bir futbol tak\u0131m\u0131 olu\u015fturaca\u011f\u0131z ve template yap\u0131s\u0131yla bu tak\u0131m\u0131 listelettirece\u011fiz.Bunun yan\u0131nda bu listeye ekleme – \u00e7\u0131karma event fonksiyonlar\u0131n\u0131 g\u00f6sterece\u011fiz.<\/p>\n
Hemen bir futbolcuyu basit d\u00fczeyde modelleyelim.<\/p>\n
\r\n    function Futbolcu(Adi, Soyadi, Numarasi) {\r\n        return {\r\n            Adi: Adi,\r\n            Soyadi: Soyadi,\r\n            Numarasi: Numarasi\r\n        };\r\n    }\r\n<\/pre>\nArd\u0131ndan ViewModel katman\u0131m\u0131z\u0131 olu\u015fturup, futbolcular\u0131m\u0131zdan olu\u015fan bir dizi olu\u015ftural\u0131m.<\/p>\n
\r\n    function FutbolTakimiVM() {\r\n        Futbolcular = ko.observableArray([\r\n            new Futbolcu("Gen\u00e7ay", "Y\u0131ld\u0131z", 1),\r\n            new Futbolcu("Selman", "Candemir", 2),\r\n            new Futbolcu("Oya", "Ba\u015fak", 3),\r\n            new Futbolcu("Derya", "Ba\u015fak", 4)\r\n        ]);\r\n    }\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi ViewModelimizi olu\u015fturduk ve i\u00e7erisinde Futbolcular isminde bir futbolcu dizisi tan\u0131mlad\u0131k.(isimlere fazla tak\u0131lmayal\u0131m l\u00fctfen, futbolu hi\u00e7 takip etmedi\u011fim i\u00e7in internetten teker teker oyuncu aramaktan \u00fc\u015fendim)<\/p>\n
\u015eimdi \u00f6ncelikle elimizdeki bu dizi listeleyelim.<\/p>\n
\r\n<div>\r\n    Futbolcu Say\u0131s\u0131 : <label data-bind="text: Futbolcular().length"><\/label>\r\n    <ul data-bind="template: { name: 'FutbolcularTemplate', foreach: Futbolcular }"><\/ul>\r\n<\/div>\r\n\r\n<script id="FutbolcularTemplate" type="text\/html">\r\n    <li>\r\n        <span data-bind="text: Adi"><\/span>&nbsp;<span data-bind="text: Soyadi"><\/span>\r\n        -\r\n        <span data-bind="text: Numarasi"><\/span>\r\n    <\/li>\r\n<\/script>\r\n<\/pre>\nBuraya kadar her\u015fey tamam.S\u0131ra futbolcular\u0131n bilgilerini alan bir form d\u00fczenlemeye geldi.<\/p>\n
\r\n<div>\r\n    Futbolcu Say\u0131s\u0131 : <label data-bind="text: Futbolcular().length"><\/label>\r\n    <ul data-bind="template: { name: 'FutbolcularTemplate', foreach: Futbolcular }"><\/ul>\r\n<\/div>\r\n<div>\r\n    <strong>Ad\u0131 : <\/strong><input data-bind="value: _Adi" \/><br \/>\r\n    <strong>Soyad\u0131 : <\/strong><input data-bind="value: _Soyadi" \/><br \/>\r\n    <strong>Numaras\u0131 : <\/strong><input data-bind="value: _Numarasi" \/><br \/>\r\n    <button data-bind="click: FutbolcuEkle">Futbolcu Ekle<\/button>                 \r\n<\/div>\r\n\r\n<script id="FutbolcularTemplate" type="text\/html">\r\n    <li>\r\n        <span data-bind="text: Adi"><\/span>&nbsp;<span data-bind="text: Soyadi"><\/span>\r\n        -\r\n        <span data-bind="text: Numarasi"><\/span>\r\n    <\/li>\r\n<\/script>\r\n<\/pre>\nFormumuzuda ilgili html kodlar\u0131 aras\u0131nda d\u00fczenledi\u011fim i\u00e7in komple yukar\u0131daki html yap\u0131s\u0131n\u0131n eklenmi\u015f halini yazd\u0131m.<\/p>\n
Yukar\u0131daki kod blo\u011funda yapt\u0131klar\u0131m\u0131z\u0131 irdeleyelim.
\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi form yap\u0131m\u0131zda verileri alaca\u011f\u0131m\u0131z input elemanlar\u0131 eklenmi\u015f ve bu elemanlara data-bind ile belirli propertyler ba\u011flanm\u0131\u015ft\u0131r.Birazdan bu propertyleri olu\u015fturup, inputlardaki verileri elde edece\u011fiz.Lakin burada as\u0131l dikkat etmeniz gereken ve konumuzun ana temas\u0131 olan button eleman\u0131ndaki data-bind’a verilen “click:FutbolcuEkle” komutudur.Button eleman\u0131m\u0131z t\u0131kland\u0131\u011f\u0131nda(yani click tetiklendi\u011finde) bir olay yarat\u0131lacakt\u0131r.\u0130\u015fte bu olay neticesinde “FutbolcuEkle” fonksiyonu devreye girecektir.Bu \u015fekilde event\u0131m\u0131z\u0131 olu\u015fturmu\u015f olaca\u011f\u0131z.<\/p>\n
\u015eimdi ViewModelimizde a\u015fa\u011f\u0131daki de\u011fi\u015fiklikleri inceleyiniz.<\/p>\n
\r\n    function FutbolTakimiVM() {\r\n        _Adi = "";\r\n        _Soyadi = "";\r\n        _Numarasi = "";\r\n\r\n        Futbolcular = ko.observableArray([\r\n            new Futbolcu("Gen\u00e7ay", "Y\u0131ld\u0131z", 1),\r\n            new Futbolcu("Selman", "Candemir", 2),\r\n            new Futbolcu("Oya", "Ba\u015fak", 3),\r\n            new Futbolcu("Derya", "Ba\u015fak", 4)\r\n        ]);\r\n\r\n        FutbolcuEkle = function () {\r\n            Futbolcular.push(new Futbolcu(_Adi, _Soyadi, _Numarasi));\r\n        }\r\n    }\r\n<\/pre>\nYukar\u0131daki kod blo\u011funda “_Adi”, “_Soyadi” ve “_Numarasi” propertyleri olu\u015fturulmu\u015f ve bu propertylere bind edilmi\u015f input elemanlar\u0131ndaki de\u011ferler aktar\u0131lm\u0131\u015ft\u0131r.<\/p>\n
Bunun yan\u0131nda butonumuz t\u0131kland\u0131\u011f\u0131 esnada \u00e7al\u0131\u015facak olan click attribute’una verdi\u011fimiz “FutbolcuEkle” isimli fonksiyonuda olu\u015fturdum.”FutbolcuEkle” bizim olu\u015fturmu\u015f oldu\u011fumuz eventt\u0131r ve g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi KnockoutJS mimarisinde bu \u015fekilde eventlar\u0131 yaratabiliyoruz.<\/p>\n
Olu\u015fturdu\u011fumuz “FutbolcuEkle” event\u0131 tetiklendi\u011finde, inputlara bind edilmi\u015f propertylerimizden al\u0131nan de\u011ferler bir “Futbolcu” nesnesi \u00fcretilerek gerekli yerlere yaz\u0131lm\u0131\u015f ve bu nesne “Futbolcular” dizisine eklenmi\u015ftir.<\/p>\n
Bu i\u015flemler neticesinde inputlara girilen de\u011ferler e\u015fli\u011finde butona t\u0131kland\u0131\u011f\u0131nda ilgili nesne olu\u015fturuluyor ve diziye ekleniyor.Bunuda a\u015fa\u011f\u0131daki videoda da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi listeleme sonucunda dinamik bir \u015fekilde g\u00f6rebiliyoruz.<\/p>\n
<\/iframe><\/p>\n<p>Bu yaz\u0131m\u0131z\u0131nda sonuna gelmi\u015f bulunmaktay\u0131z.<\/p>\n<p>Hepinize iyi \u00e7al\u0131\u015fmalar dilerim&#8230;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Bu yaz\u0131m\u0131zda KnockoutJS mimarisinde Event(Olay) fonksiyonu olu\u015fturmay\u0131 g\u00f6rece\u011fiz.E\u011fer takip\u00e7imseniz y\u00fcksek ihtimal anlam\u0131\u015fs\u0131n\u0131zd\u0131r ki, ben bir konuyu ya da yap\u0131y\u0131 genellikle senaryoland\u0131rmadan yaz\u0131ya d\u00f6kmeyi sevmem.O y\u00fczden bu basit i\u015flem i\u00e7inde k\u00fc\u00e7\u00fck bir senaryo tasarlad\u0131m.\u015eimdi bir&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[796],"tags":[62,828,797,170],"class_list":["post-3361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knockoutjs","tag-event","tag-fonksiyon-olusturma","tag-knockoutjs","tag-olay"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=3361"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3361\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=3361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}