<\/div>\n
Bir \u00f6nceki KnockoutJS Template Yap\u0131s\u0131<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda KnockoutJS mimarisinde Template yap\u0131s\u0131na giri\u015f yapm\u0131\u015ft\u0131k.Tabi ilgili makele Template yap\u0131s\u0131ndaki foreach kontrol\u00fcyle ilgili bir \u00f6rnekle seyredilmi\u015fti.Bu yaz\u0131m\u0131zda ise Template yap\u0131s\u0131ndaki di\u011fer kontrol yap\u0131lar\u0131na detayl\u0131ca de\u011finece\u011fiz.<\/p>\n
data parametresi<\/strong><\/em>
\n\u00d6nceki yaz\u0131ma g\u00f6z atarsan\u0131z e\u011fer, datalar\u0131m\u0131z\u0131n bulundu\u011fu bir dizide foreach parametresi sayesinde d\u00f6nerek Template yap\u0131s\u0131 ile ilgili alana gerekli verileri basma i\u015flemini ele alm\u0131\u015ft\u0131k.Data parametresi sayesinde bir data dizisinden ziyade bir tek data verisini Template yap\u0131s\u0131yla istedi\u011fimiz yere basabiliyoruz.<\/p>\n
\u00d6rnek olarak elimizde a\u015fa\u011f\u0131daki gibi bir ViewModel yap\u0131m\u0131z olsun.<\/p>\n
\r\n<script type="text\/javascript">\r\n    function VMOkul() {\r\n        Ogrenci = { Adi: "Gen\u00e7ay", SoyAdi: "Y\u0131ld\u0131z", Numarasi: 11040355 };\r\n        Ogretmen = { Adi: "Nurettin", SoyAdi: "\u015eim\u015fek", Dersi: "LMS" };\r\n    }\r\n<\/script>\r\n<\/pre>\nBu ViewModel i\u00e7erisinde olu\u015fturulan Ogrenci ve Ogretmen propertylerindeki verileri Template yap\u0131s\u0131nda data parametresini kullanarak a\u015fa\u011f\u0131daki gibi yazd\u0131rabiliriz.<\/p>\n\r\n<div data-bind="template: {name: 'OgrenciTemplate', data: Ogrenci}"><\/div>\r\n<div data-bind="template: {name: 'OgretmenTemplate', data: Ogretmen}"><\/div>\r\n\r\n<script id="OgrenciTemplate" type="text\/html">\r\n    <h4>\u00d6\u011frenci<\/h4>\r\n    <p><strong>Tip : <\/strong><span data-bind="text: Tip"><\/span><\/p>\r\n    <p><strong>Ad\u0131 : <\/strong><span data-bind="text: Adi"><\/span><\/p>\r\n    <p><strong>Soyad\u0131 : <\/strong><span data-bind="text: SoyAdi"><\/span><\/p>\r\n    <p><strong>Numaras\u0131 : <\/strong><span data-bind="text: Numarasi"><\/span><\/p>\r\n<\/script>\r\n<script id="OgretmenTemplate" type="text\/html">\r\n    <h4>\u00d6\u011fretmen<\/h4>\r\n    <p><strong>Tip : <\/strong><span data-bind="text: Tip"><\/span><\/p>\r\n    <p><strong>Ad\u0131 : <\/strong><span data-bind="text: Adi"><\/span><\/p>\r\n    <p><strong>Soyad\u0131 : <\/strong><span data-bind="text: SoyAdi"><\/span><\/p>\r\n    <p><strong>Dersi : <\/strong><span data-bind="text: Dersi"><\/span><\/p>\r\n<\/script>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi ViewModeldeki veri yap\u0131lar\u0131n\u0131 data parametresi sayesinde ilgili alanlara yans\u0131tm\u0131\u015f oluyoruz.
\n<\/a><\/p>\n
as parametresi<\/strong><\/em>
\nBu parametre genellikle property de\u011ferine sahip olmayan array yap\u0131lar\u0131ndaki verilere ula\u015fabilece\u011fimiz bir isim tan\u0131mlamak i\u00e7in veya template yap\u0131s\u0131nda birden fazla foreach kullanacaksak ve bu d\u00f6ng\u00fcler i\u00e7 i\u00e7e bir yap\u0131da olacaksa e\u011fer d\u00f6ng\u00fclerin veri k\u00fcmelerine alias yani bir sembolik isim tan\u0131mlamak i\u00e7in kullan\u0131lmaktad\u0131r.<\/p>\n
\r\n    function VMOkul() {\r\n        Ogrenciler = ko.observableArray([\r\n            {\r\n                Adi: "Gen\u00e7ay",\r\n                SoyAdi: "Y\u0131ld\u0131z",\r\n                AldigiDersler: ["A Dersi", "B Dersi", "C Dersi"]\r\n            }, {\r\n                Adi: "Mehmet",\r\n                SoyAdi: "Suba\u015f\u0131",\r\n                AldigiDersler: ["D Dersi", "E Dersi", "F Dersi"]\r\n            }, {\r\n                Adi: "Ceylan",\r\n                SoyAdi: "Kayap\u0131nar",\r\n                AldigiDersler: ["G Dersi", "H Dersi", "I Dersi"]\r\n            }, {\r\n                Adi: "Nurettin",\r\n                SoyAdi: "Saglam",\r\n                AldigiDersler: ["\u0130 Dersi", "O Dersi", "\u00d6 Dersi"]\r\n            }\r\n        ]);\r\n    }\r\n<\/pre>\nYukar\u0131daki ViewModeldeki Ogrenciler dizi yap\u0131s\u0131 tan\u0131mlanm\u0131\u015ft\u0131r.Dikkat ederseniz AldigiDersler propertyside bir array yap\u0131s\u0131d\u0131r.\u015eimdi biz hem Ogrenciler dizi yap\u0131s\u0131 i\u00e7erisinde d\u00f6nerek listeleme yapaca\u011f\u0131z, bunun yan\u0131nda her \u00f6\u011frencinin ald\u0131\u011f\u0131 dersleri tutan AldigiDersler propertysindeki dizi yap\u0131s\u0131 i\u00e7erisinde de d\u00f6nece\u011fiz.AldigiDersler dizisi i\u00e7erisindeki verilerin bir property de\u011ferleri olmad\u0131\u011f\u0131 i\u00e7in bunlara as parametresiyle tan\u0131mlad\u0131\u011f\u0131m\u0131z isim sayesinde ula\u015faca\u011f\u0131z.Bir yandan da Ogrenciler dizisindeki verilerede i\u00e7 i\u00e7e foreach d\u00f6ng\u00fcs\u00fcndeki o anki \u00fcst de\u011fere ula\u015fmak i\u00e7in as parametresiyle ayr\u0131 bir isim tan\u0131mlayarak i\u015flemlerimizi ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n
Lakin,<\/p>\n\r\n<div data-bind="template: {name: 'OgrencilerTemplate', foreach:Ogrenciler}"><\/div>\r\n\r\n<script id="OgrencilerTemplate" type="text\/html">\r\n    <ul>\r\n        <li>\r\n            <strong>Ad\u0131 : <\/strong><span data-bind="text: Adi"><\/span>\r\n            <br \/>\r\n            <strong>Soyad\u0131: <\/strong><span data-bind="text: SoyAdi"><\/span>\r\n        <\/li>\r\n    <\/ul>\r\n<\/script>\r\n<\/pre>\ne\u011fer bu \u015fekilde bir kullan\u0131m yaparsak sadece Ogrenciler isimli array yap\u0131m\u0131zdaki elemanlar\u0131n Adi ve SoyAdi property de\u011ferleri ekrana yazd\u0131r\u0131lacakt\u0131r.\u015eimdi bu yap\u0131ya AldigiDersler dizi yap\u0131s\u0131ndaki d\u00f6ng\u00fcy\u00fcde ekleyelim.<\/p>\n\r\n<div data-bind="template: {name: 'OgrencilerTemplate', foreach:Ogrenciler}"><\/div>\r\n\r\n<script id="OgrencilerTemplate" type="text\/html">\r\n    <ul>\r\n        <li>\r\n            <strong>Ad\u0131 : <\/strong><span data-bind="text: Adi"><\/span>\r\n            <br \/>\r\n            <strong>Soyad\u0131 : <\/strong><span data-bind="text: SoyAdi"><\/span>\r\n            <br \/>\r\n            <ul data-bind="template : {name: 'AldigiDerslerTemplate', foreach: AldigiDersler, as: 'Ders'}"><\/ul>\r\n        <\/li>\r\n    <\/ul>\r\n<\/script>\r\n\r\n\r\n<script id="AldigiDerslerTemplate" type="text\/html">\r\n    <li>\r\n        <span data-bind="text: Ders"><\/span>\r\n    <\/li>\r\n<\/script>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “AldigiDerslerTemplate” isminde bir template tan\u0131mlanmakta ve bu template yap\u0131s\u0131nda foreach parametresine “AldigiDersler” isimli dizi yap\u0131s\u0131 verilmektedir.Lakin “AldigiDersler” dizi yap\u0131s\u0131n\u0131n i\u00e7indeki verilere ula\u015fabilece\u011fimiz bir property ad\u0131 bulunmad\u0131\u011f\u0131 i\u00e7in bunlara as parametresiyle atad\u0131\u011f\u0131m\u0131z “Ders” ismiyle ula\u015fabilmekte ve i\u015flemlerimizi “AldigiDerslerTemplate” isimli template scriptinde ger\u00e7ekle\u015ftirebilmekteyiz.<\/p>\n
as parametresiyle ilgili ek olarak ekleyebilece\u011fimiz i\u015flemde Ogrenciler dizisindeki o anki elemana i\u00e7teki d\u00f6ng\u00fcde ula\u015fabilmektir.<\/p>\n\r\n<div data-bind="template: {name: 'OgrencilerTemplate', foreach:Ogrenciler, as: 'Ogrenci'}"><\/div>\r\n\r\n<script id="OgrencilerTemplate" type="text\/html">\r\n    <ul>\r\n        <li>\r\n            <strong>Ad\u0131 : <\/strong><span data-bind="text: Adi"><\/span>\r\n            <br \/>\r\n            <strong>Soyad\u0131 : <\/strong><span data-bind="text: SoyAdi"><\/span>\r\n            <br \/>\r\n            <ul data-bind="template : {name: 'AldigiDerslerTemplate', foreach: AldigiDersler, as: 'Ders'}"><\/ul>\r\n        <\/li>\r\n    <\/ul>\r\n<\/script>\r\n\r\n\r\n<script id="AldigiDerslerTemplate" type="text\/html">\r\n    <li>\r\n        <span data-bind="text: Ders"><\/span>\r\n        -\r\n        <span data-bind="text: Ogrenci.Adi"><\/span>\r\n    <\/li>\r\n<\/script>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “OgrencilerTemplate” isimli Template yap\u0131s\u0131na as parametresiyle o an foreach d\u00f6ng\u00fcs\u00fcnde elde tutulan nesneyi tan\u0131mlayacak “Ogrenci” de\u011ferini vermi\u015f olduk.Bu “Ogrenci” de\u011feri sayesinde “AldigiDerslerTemplate” isimli template yap\u0131s\u0131nda \u00fcst d\u00f6ng\u00fcdeki o anki nesneye ula\u015fabiliyor ve istedi\u011fimiz de\u011feri yazd\u0131rabiliyoruz.<\/p>\n
\u00d6rnektede g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “Ogrenci.Adi” komutuyla foreach d\u00f6ng\u00fcs\u00fcndeki o anki \u00f6\u011frenci nesnesini elde ediyor ve Adi de\u011ferini yazd\u0131rabiliyoruz.<\/p>\n<\/a><\/p>\n
San\u0131r\u0131m bu yaz\u0131mlada beraber KnockoutJS mimarisinde template yap\u0131s\u0131n\u0131 ortalama esneklikte kullanabilece\u011finiz t\u00fcm parametreleri tan\u0131tm\u0131\u015f oldum.
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Bir \u00f6nceki KnockoutJS Template Yap\u0131s\u0131 ba\u015fl\u0131kl\u0131 yaz\u0131mda KnockoutJS mimarisinde Template yap\u0131s\u0131na giri\u015f yapm\u0131\u015ft\u0131k.Tabi ilgili makele Template yap\u0131s\u0131ndaki foreach kontrol\u00fcyle ilgili bir \u00f6rnekle seyredilmi\u015fti.Bu yaz\u0131m\u0131zda ise Template yap\u0131s\u0131ndaki di\u011fer kontrol yap\u0131lar\u0131na detayl\u0131ca de\u011finece\u011fiz. data parametresi...<\/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":[823,822,820,821,797,250],"class_list":["post-3348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knockoutjs","tag-as","tag-as-parametresi","tag-data","tag-data-parametresi","tag-knockoutjs","tag-template"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3348","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=3348"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3348\/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=3348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}