<\/div>\n
\u00d6nceki yaz\u0131lar\u0131mdan olan KnockoutJS Nedir? Ne Ama\u00e7la, Nas\u0131l Kullan\u0131l\u0131r?<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda KnockoutJS’ye ne ama\u00e7la ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair bir giri\u015f niteli\u011finde ba\u015flang\u0131\u00e7 yapm\u0131\u015ft\u0131k.Haliyle bu yaz\u0131m\u0131zda KnockoutJS’de bir kendimiz bir model olu\u015fturup kullanmay\u0131 irdeleyece\u011fiz.<\/p>\n
\u015eimdi \u00f6rnek ama\u00e7l\u0131 bir insan\u0131 modelleyen bir model olu\u015ftural\u0131m.<\/p>\n
\r\n    function Insan(Ad, Soyad, Yas, Cinsiyet) {\r\n        var _Ad = Ad;\r\n        var _Soyad = Soyad;\r\n        var _Yas = Yas;\r\n        var _Cinsiyet = Cinsiyet;\r\n\r\n        return {\r\n            InsanOzellikleri: ko.observable("Ad\u0131 Soyad\u0131 : " + _Ad + " " + _Soyad + " Ya\u015f\u0131 : " + _Yas + " Cinsiyeti : " + _Cinsiyet)\r\n        };\r\n    }\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer bir Model olu\u015fturmu\u015f olduk.KnockoutJS’de modeli bildi\u011finiz fonksiyon olarak tan\u0131ml\u0131yoruz.Olu\u015fturdu\u011fumuz bu \u00f6rnek model parametreler almakta ve bu parametrelerin de\u011ferlerini alt tireyle(_) ba\u015flayan de\u011fi\u015fkenlere atamaktay\u0131z.Lakin burada dikkat etmeniz gereken husus ise bu modelde property(\u00f6zellik) olarak bar\u0131nd\u0131r\u0131lacak yap\u0131lar\u0131n bu de\u011fi\u015fkenlerin olmamas\u0131d\u0131r.Modelde property olarak kullan\u0131lacak yap\u0131lar return {…} blo\u011fu i\u00e7erisinde olu\u015fturulan yap\u0131lard\u0131r.\u00d6rnekte biz InsanOzellikleri isimli bir property olu\u015fturduk ve de\u011fi\u015fkenlerdeki de\u011ferleri bu propertye set edip, bu verilerin \u00e7a\u011fr\u0131ld\u0131klar\u0131nda get i\u015flemini ger\u00e7ekle\u015ftirdik.<\/p>\n
Bu modelde a\u015fa\u011f\u0131daki gibi daha \u00e7ok property yap\u0131s\u0131da olu\u015fturabilirdik.<\/p>\n\r\n    function Insan(Ad, Soyad, Yas, Cinsiyet) {\r\n        var _Ad = Ad;\r\n        var _Soyad = Soyad;\r\n        var _Yas = Yas;\r\n        var _Cinsiyet = Cinsiyet;\r\n\r\n        return {\r\n            Ad: _Ad,\r\n            Soyad: _Soyad,\r\n            Yas: _Yas,\r\n            Cinsiyet: _Cinsiyet\r\n        };\r\n    }\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi e\u011fer bu \u015fekilde olu\u015fturmu\u015f olsayd\u0131k bu modeli kullan\u0131rken “Ad”, “Soyad”, “Yas” ve “Cinsiyet” propertylerine ula\u015fabilirdik.<\/p>\n
\u015eimdi bu son haliyle olu\u015fturdu\u011fumuz modeli a\u015fa\u011f\u0131daki gibi bir ViewModel’de kullanmay\u0131 inceleyelim.<\/p>\n\r\n    function ViewModel() {\r\n        InsanNesnesi = Insan("Gen\u00e7ay", "Y\u0131ld\u0131z", "24", "Erkek");\r\n    }\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi olu\u015fturmu\u015f oldu\u011fumuz Insan modelinden ViewModel’de bir nesne \u00fcretmi\u015f olduk.Hani ViewModel bizim View ile Model katmanlar\u0131 aras\u0131ndaki ba\u011flant\u0131y\u0131 sa\u011flama g\u00f6revine sahip oldu\u011fu i\u00e7in birazdan bu ViewModel’de ki olu\u015fturdu\u011fumuz nesneyi View katman\u0131nda kullanaca\u011f\u0131z.Tabi burada demem gereken m\u00fchim nokta \u015fu ki, ViewModel’de sadece propertyler de\u011fil nesneler \u00fczerinden de i\u015flemler ger\u00e7ekle\u015ftirebiliriz.Bu dedi\u011fime misal olarak yukar\u0131da vermi\u015f oldu\u011fum ViewModel’i ele alal\u0131m.Bir Insan modelinden nesne \u00fcretiyoruz ve o nesneyi direkt “InsanNesnesi” isimli bir \u00f6zelli\u011fe at\u0131yoruz.Bu “InsanNesnesi” ismini verdi\u011fimiz \u00f6zelli\u011fin ad\u0131nda View katman\u0131nda da ayn\u0131 isimde Bind edilmi\u015f nesnelerde nesnemizi kullanabilece\u011fiz.<\/p>\n\r\n<div>\r\n    <p data-bind="text : InsanNesnesi"><\/p>\r\n<\/div>\r\n<\/pre>\n\u00d6rnek olarak ViewModel’de ki “InsanNesnesi” \u00f6zelli\u011fiyle yukar\u0131daki gibi html eleman\u0131n\u0131 birbirine ba\u011flay\u0131p Bind etmi\u015f olal\u0131m.Bakal\u0131m projeyi \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda kar\u015f\u0131m\u0131za nas\u0131l bir g\u00f6r\u00fcnt\u00fc gelecektir.
\n<\/a><\/p>\n
Oppss!!!O da ne!
\n[object Object] diye hataya benzer bir \u015fey ald\u0131k.
\nEee bunun sebebi; bizim ViewModel’de “InsanNesnesi” \u00f6zelli\u011fine direkt olarak “Insan” modelinden bir nesne ba\u011flam\u0131\u015f olmam\u0131zdan kaynaklanmaktad\u0131r.Haliyle “InsanNesnesi” \u00f6zelli\u011fini direkt html nesnesine Bind edince bu \u015fekilde bir yaz\u0131 yaz\u0131yor.Yani adam bize “karde\u015fim bu Bind etti\u011fin yap\u0131 bir obje, objeee” diyor.Haliyle biz Bind edilen nesnenin hangi propertysi oldu\u011funu belirtmeliyiz.<\/p>\n
\r\n<div>\r\n    <p data-bind="text : InsanNesnesi.Ad"><\/p>\r\n<\/div>\r\n<\/pre>\nYukar\u0131daki gibi bir g\u00fcncelle\u015ftirme yapt\u0131m ve “InsanNesnesi.Ad” diyerek Bind edilen datan\u0131n(ki o datan\u0131n biz bir nesne oldu\u011funu biliyoruz) “Ad” isimli propertysini bu html eleman\u0131na ba\u011fl\u0131yoruz(Bind) ediyoruz.
\n<\/a>
\nBak\u0131n, \u015fimdi g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi data olarak g\u00f6nderilen nesnenin propertysine Bind edilince s\u0131k\u0131nt\u0131s\u0131z ilgili alana verimiz gelmektedir.<\/p>\n
\u015eimdi \u00f6rne\u011fimizi geni\u015fletelim.<\/p>\n
\r\n    function ViewModel() {\r\n        var InsanNesnesi = Insan("Gen\u00e7ay", "Y\u0131ld\u0131z", "24", "Erkek");\r\n        Ad = InsanNesnesi.Ad;\r\n        Soyad = InsanNesnesi.Soyad;\r\n        Yas = InsanNesnesi.Yas;\r\n        Cinsiyet = InsanNesnesi.Cinsiyet;\r\n        Huseyin = "\u00d6rnek";\r\n    }\r\n<\/pre>\nViewModel katman\u0131m\u0131zda yukar\u0131daki gibi bir fantezi uygulayal\u0131m.<\/p>\n\r\n<div>\r\n    <p data-bind="text : Ad"><\/p>\r\n    <p data-bind="text : Soyad"><\/p>\r\n    <p data-bind="text : Yas"><\/p>\r\n    <p data-bind="text : Cinsiyet"><\/p>\r\n    <p data-bind="text : Huseyin"><\/p>\r\n<\/div>\r\n<\/pre>\nView katman\u0131m\u0131zda da bu \u015fekilde ViewModel’de ki \u00f6zelliklere uygun ba\u011flant\u0131lar kural\u0131m.Bakal\u0131m ne olacak;
\n<\/a>
\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi nesnemizdeki propertyleri tek tek ViewModel’de farkl\u0131 \u00f6zelliklere tan\u0131mlay\u0131p, html nesnelerinde o \u00f6zellikler \u00fczerinden de ba\u011flant\u0131 kurabiliyoruz.<\/p>\n
Tabi soracaks\u0131n\u0131z \u015fimdi “Huseyin diye \u00f6zellik ne alaka la” diye?<\/p>\n
Bunu koymam\u0131n sebebi, \u00f6rnekteki ViewModel yap\u0131s\u0131n\u0131 sadece modele ba\u011fl\u0131 olarak \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 sanmay\u0131n, olduk\u00e7a esnek \u00e7al\u0131\u015fma yapabiliyoruz diyebilmek i\u00e7in vermi\u015f bulunmaktay\u0131m.Ha Huseyin ismini sorarsan\u0131z e\u011fer heyecandan \u00f6zelli\u011fe verecek ba\u015fka isim bulamad\u0131m.Aceleye geldi…<\/p>\n
Neyse,<\/p>\n
Nihayetinde KnockoutJS mimarisinde model yap\u0131s\u0131n\u0131n nas\u0131l olu\u015fturuldu\u011fu ve olu\u015fturdu\u011fumuz kendi modelimizi nas\u0131l kulland\u0131\u011f\u0131m\u0131z\u0131 g\u00f6rm\u00fc\u015f olduk.<\/p>\n
Son olarak KnockoutJS ile bunca i\u015flemi yapabilmek i\u00e7in applyBindings metodu ile ilgili ViewModel’i Knockout objesine Bind etmemiz gerekti\u011fini hat\u0131rlatmak isterim.<\/p>\n
\r\n    $(document).ready(function () {\r\n        ko.applyBindings(ViewModel());\r\n    });\r\n<\/pre>\nEvet, bir sonraki KnockoutJS yaz\u0131m\u0131zda san\u0131r\u0131m template yap\u0131s\u0131ndan bahsedece\u011fim.
\nO halde sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00d6nceki yaz\u0131lar\u0131mdan olan KnockoutJS Nedir? Ne Ama\u00e7la, Nas\u0131l Kullan\u0131l\u0131r? ba\u015fl\u0131kl\u0131 yaz\u0131mda KnockoutJS’ye ne ama\u00e7la ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair bir giri\u015f niteli\u011finde ba\u015flang\u0131\u00e7 yapm\u0131\u015ft\u0131k.Haliyle bu yaz\u0131m\u0131zda KnockoutJS’de bir kendimiz bir model olu\u015fturup kullanmay\u0131 irdeleyece\u011fiz. \u015eimdi...<\/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":[806,797,817,284,807],"class_list":["post-3326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knockoutjs","tag-applybindings","tag-knockoutjs","tag-knockoutjs-model","tag-model","tag-viewmodel"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3326","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=3326"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3326\/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=3326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}