<\/div>\n
Bu yaz\u0131m\u0131zda KnockoutJS k\u00fct\u00fcphanesinde Template yap\u0131s\u0131n\u0131 inceleyece\u011fiz.Konuyu desteklemek ama\u00e7l\u0131 KnockoutJS’de dizi mant\u0131\u011f\u0131ndan ve foreach yap\u0131s\u0131ndan faydalanaca\u011f\u0131z.<\/p>\n
Hemen \u00f6rnek ama\u00e7l\u0131 bir insan\u0131 modelleyen bir data olu\u015ftural\u0131m.<\/p>\n
\r\n    function Insan(Ad, Soyad, Memleket) {\r\n        return {\r\n            Ad: Ad,\r\n            Soyad: Soyad,\r\n            Memleket: Memleket\r\n        };\r\n    }\r\n<\/pre>\n\u015eimdide bu datay\u0131 yap\u0131land\u0131raca\u011f\u0131m\u0131z ViewModel katman\u0131m\u0131z\u0131 olu\u015ftural\u0131m.<\/p>\n
\r\n    function VMInsan() {\r\n        Insanlar = ko.observableArray\r\n            ([\r\n                Insan("Selman", "Candemir", "Yozgat"),\r\n                Insan("Gen\u00e7ay", "Y\u0131ld\u0131z", "Artvin"),\r\n                Insan("Ahmet", "Yal\u00e7\u0131n", "Ankara")\r\n            ]);\r\n    }\r\n<\/pre>\nDikkat ederseniz e\u011fer bir dizi yap\u0131s\u0131 olu\u015fturmu\u015f olduk.Bu dizi yap\u0131s\u0131n\u0131 KnockoutJS k\u00fct\u00fcphanesinin observableArray<\/strong><\/em> metoduyla olu\u015fturuyoruz. “ko.observableArray” komutunu kullan\u0131rken daha esnek bir yap\u0131 isterseniz e\u011fer a\u015fa\u011f\u0131daki gibi bir kullan\u0131m\u0131da tercih edebilirsiniz.<\/p>\n
\r\n    function VMInsan() {\r\n        var InsanDizisi = new Array\r\n            (\r\n                Insan("Selman", "Candemir", "Yozgat"),\r\n                Insan("Gen\u00e7ay", "Y\u0131ld\u0131z", "Artvin"),\r\n                Insan("Ahmet", "Yal\u00e7\u0131n", "Ankara")\r\n            );\r\n\r\n        Insanlar = ko.observableArray(InsanDizisi);\r\n    }\r\n<\/pre>\nVelhas\u0131l bu sizin tercihinize kalm\u0131\u015f.<\/p>\n
\u015eimdi buraya kadar bir insan\u0131 modelleyen data ve o datay\u0131 dizisel bi\u00e7imde manip\u00fcle eden ViewModel katman\u0131 olu\u015fturmu\u015f olduk.\u015eimdi KnockoutJS mimarisinin template yap\u0131s\u0131n\u0131 kullanarak bu array yap\u0131s\u0131n\u0131 listeletelim.<\/p>\n
\r\n<h2>\u0130nsanlar(<label data-bind="text: Insanlar().length"><\/label>)<\/h2>\r\n<table style="width:50%;">\r\n    <tbody data-bind="template: { name: 'TemplateInsanListesi', foreach: Insanlar }"><\/tbody>\r\n<\/table>\r\n\r\n<script id="TemplateInsanListesi" type="text\/html">\r\n    <tr>\r\n        <td style="width:30%;" data-bind="text: Ad"><\/td>\r\n        <td style="width:30%;" data-bind="text: Soyad"><\/td>\r\n        <td data-bind="text: Memleket"><\/td>\r\n    <\/tr>\r\n<\/script>\r\n<\/pre>\n\u015eimdi yukar\u0131daki kod blo\u011fu sayesinde ViewModelimizde olu\u015fturmu\u015f oldu\u011fumuz Insan datalar\u0131yla dolu Array yap\u0131m\u0131z\u0131 KnockoutJS Template yap\u0131s\u0131yla listelemi\u015f olduk.Yapt\u0131\u011f\u0131m\u0131z i\u015flemi sat\u0131r sat\u0131r izah etmek gerekirse;<\/p>\n
\n1. Sat\u0131rda<\/strong><\/em>, “Insanlar().length” komutu ile ViewModel’den gelen Insanlar dizisinde ka\u00e7 eleman var ise hesaplay\u0131p yazd\u0131r\u0131yoruz.Tabi kafan\u0131za Insanlar yap\u0131s\u0131nda neden parantez kulland\u0131\u011f\u0131m\u0131z tak\u0131labilir.Bunun sebebi, anlad\u0131\u011f\u0131m kadar\u0131la ViewModel katman\u0131nda manip\u00fcle edilen yap\u0131lar View katman\u0131nda ya de\u011fer yap\u0131l\u0131 olarak ya da metoda benzer bir tarzda kullan\u0131labilmekteler.\u00d6rne\u011fin ilgili sat\u0131rda “<label data-bind=”text: Insanlar”><\/label>” \u015feklinde bir kullan\u0131m yapm\u0131\u015f olsayd\u0131k a\u015fa\u011f\u0131daki gibi bir g\u00f6r\u00fcnt\u00fcyle kar\u015f\u0131la\u015facakt\u0131k.\n<\/a><\/p>\n
Bu demek oluyor ki, View’de kulland\u0131\u011f\u0131m\u0131z Insanlar komutu yaz\u0131ld\u0131\u011f\u0131 gibi bir diziyi temsil etmektedir lakin \u00fczerinde prosed\u00fcrel metodlar\u0131 \u00e7al\u0131\u015ft\u0131rabilmek i\u00e7in (parantez) ile kullanmak gerekmektedir.\n<\/li>\n
3. Sat\u0131rda<\/strong><\/em> ise, as\u0131l bu i\u00e7eri\u011fimizin temel noktalar\u0131ndan biriside bu sat\u0131rdad\u0131r.ViewModel katman\u0131nda olu\u015fturdu\u011fumuz Insan datalar\u0131ndan olu\u015fan Array yap\u0131s\u0131n\u0131 Template yap\u0131s\u0131n\u0131 kullanarak buradaki tabloda listeletece\u011fiz.Bu i\u015flem i\u00e7in tbody etiketinin i\u00e7ini Template yap\u0131s\u0131n\u0131n imkanlar\u0131yla dolduruyoruz.Fark\u0131ndaysan\u0131z tbody etiketi a\u00e7\u0131ld\u0131\u011f\u0131 gibi kapat\u0131lm\u0131\u015ft\u0131r ve “data-bind=”template: { name: ‘TemplateInsanListesi’, foreach: Insanlar }” gibi bir komutla beslenmi\u015ftir.Bu komutta ki, “template” komutu ile bu tbody alan\u0131na bir template tan\u0131mlanaca\u011f\u0131n\u0131 ifade etmi\u015f oluyoruz.S\u00fcsl\u00fc parantezler i\u00e7erisindeki name parametresi o tan\u0131mlanacak olan templatein ismini almaktad\u0131r.Ben TemplateInsanListesi ismini verdim.Ayn\u0131 \u015fekilde s\u00fcsl\u00fc parantez i\u00e7erisindeki ikinci parametre olan foreach ile de bu template’e hangi veri k\u00fcmesinin bind edilece\u011fini belirtiyoruz.Biz do\u011fal olarak ViewModel katman\u0131nda olu\u015fturmu\u015f oldu\u011fumuz Insanlar Array yap\u0131s\u0131n\u0131 vermekteyiz.<\/li>\n
6. Sat\u0131rda<\/strong><\/em> ise, bir script blo\u011funun a\u00e7\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rmekteyiz.Bu script yap\u0131s\u0131n\u0131n type \u00f6zelli\u011finin text\/html oldu\u011funa dikkatinizi \u00e7ekerim.\u00d6ncelikle bu a\u00e7\u0131lan script blo\u011funun i\u015flevine de\u011findikten sonra kullan\u0131rken hangi hususlar\u0131n \u00f6nemli oldu\u011fundan bahsedece\u011fim.\nA\u00e7t\u0131\u011f\u0131m\u0131z script blo\u011funa bakarsan\u0131z e\u011fer i\u00e7erisinde tr ve td yap\u0131lar\u0131n\u0131 bar\u0131nd\u0131rmakta ve td yap\u0131lar\u0131na bir\u015feylerin de\u011ferini bind etmektedir(o bir\u015feylere bir ka\u00e7 sat\u0131r sonra anlaml\u0131ca gelece\u011fim).\u0130\u015fte 3. sat\u0131rda bulunan tbody eleman\u0131na tan\u0131mlam\u0131\u015f oldu\u011fumuz template yap\u0131s\u0131na bu scriptte bulunan yap\u0131lar\u0131 g\u00f6mece\u011fiz.Tabi g\u00f6mece\u011fiz derken templateimizde olu\u015fturdu\u011fumuz foreach d\u00f6ng\u00fcs\u00fc e\u015fli\u011finde bu script \u00e7al\u0131\u015facak ve her eleman i\u00e7in bu i\u015flev tekrarlanacakt\u0131r.<\/p>\n
Biliyoruz ki, ViewModel’de Insan datalar\u0131ndan olu\u015fan “Insanlar” isimli bir Array tan\u0131mlad\u0131k ve bu tan\u0131mlanan dizi yap\u0131s\u0131 “TemplateInsanListesi” isimli template e foreach ile d\u00f6n\u00fclmek \u00fczere ba\u011flanm\u0131\u015ft\u0131r.Script yap\u0131m\u0131z ka\u00e7 eleman varsa o kadar \u00e7al\u0131\u015facakt\u0131r ve her Insan datas\u0131n\u0131n “Ad”, “Soyad” ve “Memleket” \u00f6zelliklerindeki de\u011ferleri i\u00e7indeki td elemanlar\u0131na bind edecektir.Ee haliyle bir tablo i\u00e7erisinde tr elemanlar\u0131 sayesinde sat\u0131r sat\u0131r verilerimiz i\u015flenecek ve bir liste halinde g\u00f6r\u00fcnt\u00fclenebilecektir.<\/p>\n
Burada dikkat etmeniz gereken husus ise, script’in id de\u011feri ile template’in name de\u011ferleri ayn\u0131 olmal\u0131d\u0131rlar.Yani hangi template’i hangi script’in \u00e7al\u0131\u015ft\u0131raca\u011f\u0131n\u0131 name ve id ba\u011f\u0131nt\u0131s\u0131 sayesinde \u00e7\u00f6z\u00fcml\u00fcyoruz.\n<\/li>\n<\/ul>\nYapt\u0131\u011f\u0131m\u0131z \u00e7al\u0131\u015fman\u0131n derlenmi\u015f halinin ekran \u00e7\u0131kt\u0131s\u0131 a\u015fa\u011f\u0131daki gibi olacakt\u0131r.
\n<\/a><\/p>\n
\u00d6rne\u011fimizde kullanm\u0131\u015f oldu\u011fumuz t\u00fcm komutlar\u0131n derlenmi\u015f hali,<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/jquery-2.1.4.min.js"><\/script>\r\n    <script src="~\/Scripts\/knockout-3.3.0.js"><\/script>\r\n<\/head>\r\n<body>\r\n    <h2>\u0130nsanlar(<label data-bind="text: Insanlar().length"><\/label>)<\/h2>\r\n<table style="width:50%;">\r\n    <tbody data-bind="template: { name: 'TemplateInsanListesi', foreach: Insanlar }"><\/tbody>\r\n<\/table>\r\n\r\n<script id="TemplateInsanListesi" type="text\/html">\r\n    <tr>\r\n        <td style="width:30%;" data-bind="text: Ad"><\/td>\r\n        <td style="width:30%;" data-bind="text: Soyad"><\/td>\r\n        <td data-bind="text: Memleket"><\/td>\r\n    <\/tr>\r\n<\/script>\r\n\r\n<script type="text\/javascript">\r\n\r\n    function Insan(Ad, Soyad, Memleket) {\r\n        return {\r\n            Ad: Ad,\r\n            Soyad: Soyad,\r\n            Memleket: Memleket\r\n        };\r\n    }\r\n\r\n    function VMInsan() {\r\n        var InsanDizisi = new Array\r\n            (\r\n                Insan("Selman", "Candemir", "Yozgat"),\r\n                Insan("Gen\u00e7ay", "Y\u0131ld\u0131z", "Artvin"),\r\n                Insan("Ahmet", "Yal\u00e7\u0131n", "Ankara")\r\n            );\r\n\r\n        Insanlar = ko.observableArray(InsanDizisi);\r\n\r\n    }\r\n\r\n    $(document).ready(function () {\r\n        ko.applyBindings(VMInsan);\r\n    });\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu yaz\u0131m\u0131zda KnockoutJS k\u00fct\u00fcphanesinde Template yap\u0131s\u0131n\u0131 inceleyece\u011fiz.Konuyu desteklemek ama\u00e7l\u0131 KnockoutJS’de dizi mant\u0131\u011f\u0131ndan ve foreach yap\u0131s\u0131ndan faydalanaca\u011f\u0131z. Hemen \u00f6rnek ama\u00e7l\u0131 bir insan\u0131 modelleyen bir data olu\u015ftural\u0131m. function Insan(Ad, Soyad, Memleket) { return { Ad: Ad,...<\/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":[60,797,819,818,380,250],"class_list":["post-3334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knockoutjs","tag-foreach","tag-knockoutjs","tag-ko","tag-observablearray","tag-script","tag-template"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3334","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=3334"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3334\/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=3334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}