<\/div>\n

Bu yaz\u0131m\u0131zda web sayfalar\u0131nda kaynak kodlar\u0131 olduk\u00e7a sade ve anla\u015f\u0131l\u0131r bir yap\u0131da dizayn etmemizi sa\u011flayan bir JavaScript k\u00fct\u00fcphanesinden bahsedece\u011fiz.<\/p>\n

Hemen ba\u015flayal\u0131m..<\/p>\n

KnockoutJS Nedir?<\/strong>
\nMVVM(Model View ViewModel) Presentation Model mimarisi temelinde tasarlanan bir JavaScript k\u00fct\u00fcphanesidir.<\/p>\n

Hemen MVVM’in ne oldu\u011funa de\u011finmek gerekirse a\u015fa\u011f\u0131daki \u015fablonla izah edebilirim.
\n $\"MVVM$ <\/a><\/p>\n

Yukar\u0131daki \u015fablondan da g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, biz yaz\u0131l\u0131mc\u0131lar\u0131 ayn\u0131 kodlar\u0131 yazmaktan ka\u00e7\u0131nd\u0131ran, \u00fc\u00e7 katman\u0131nda birbiriyle ayr\u0131 olarak etkile\u015fim kurdu\u011fu, projenin \u00f6l\u00e7eklenebilmesi a\u00e7\u0131s\u0131ndan faydal\u0131 bir tasar\u0131m desenidir diyebiliriz.<\/p>\n

Bu tasar\u0131m deseni sayesinde, b\u00fcy\u00fck projelerde de\u011fi\u015fiklikler ya da g\u00fcncellemelerde olabilecek t\u00fcm zahmet ve y\u0131k\u0131mlardan ar\u0131nd\u0131r\u0131lm\u0131\u015f olunmaktad\u0131r.Do\u011frudan kolayca bir \u015feyleri de\u011fi\u015ftirmeye imkan tan\u0131maktad\u0131r.<\/p>\n

Bu tasar\u0131m deseni teknik olarak, View’\u0131n Modeli bilmesinin gereklili\u011fini ortadan kald\u0131rd\u0131\u011f\u0131 gibi, aray\u00fcz yapan ki\u015finin de arka tarafta nas\u0131l bir i\u015f geli\u015ftirildi\u011fini bilmeden ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n

Yukar\u0131daki \u015feymay\u0131 tekrardan ele al\u0131rsak e\u011fer,<\/p>\n

\n
View<\/strong><\/em>, verinin(data) sunuldu\u011fu katmand\u0131r.<\/li>\n
ViewModel<\/strong><\/em>, Model ile View aras\u0131nda etkile\u015fim kuran, birnevi birbirine ba\u011flayan(Binding) katman\u0131d\u0131r.<\/li>\n
Model<\/strong> <\/em>ise, uygulama i\u00e7erisinde kullanaca\u011f\u0131m\u0131z veri(data)d\u0131r.<\/li>\n<\/ul>\n
<\/p>\n
\u015eemadan da anla\u015f\u0131ld\u0131\u011f\u0131 \u00fczere; View, ViewModel sayesinde Model katman\u0131na eri\u015fmekte ve kullan\u0131c\u0131 talebine cevap vermektedir.<\/p>\n
Her ne kadar ben haklar\u0131nda bir bilgi bilmesemde Silverlight\u00a0ve WPF mimarileride bu deseni kullanmaktad\u0131r.<\/p>\n
KnockoutJS Ne Ama\u00e7la Kullan\u0131l\u0131r?<\/strong>
\nAsl\u0131nda bu sorunun cevab\u0131 \u015fudur demek yanl\u0131\u015f olacakt\u0131r.Lakin yaz\u0131m\u0131z\u0131n ba\u015f\u0131nda da belirtti\u011fim \u00fczere kaynak kodlarda sade ve anla\u015f\u0131l\u0131r bir yap\u0131 kullanmak, kullan\u0131c\u0131 etkile\u015fimini artt\u0131rmak, karma\u015f\u0131kl\u0131\u011f\u0131 ve kod kalabal\u0131\u011f\u0131n\u0131 azaltmak esas ama\u00e7 edinildi\u011finden dolay\u0131 tercih edebilirsiniz.<\/p>\n
KnockoutJS Nas\u0131l Kullan\u0131l\u0131r?<\/strong>
\nBu yaz\u0131m\u0131zda KnockoutJS’ye prosed\u00fcrel olarak temelden girece\u011fiz ve mimarisel yap\u0131y\u0131 kodlar \u00fczerinden tan\u0131t\u0131rken, hem nas\u0131l kullan\u0131d\u0131\u011f\u0131na hem de kullan\u0131rken nelere ihtiyac\u0131m\u0131z oldu\u011funa de\u011finmi\u015f olaca\u011f\u0131z.<\/p>\n
\u00d6ncelikle KnockoutJS k\u00fct\u00fcphanesini projemizde kullanabilmemiz i\u00e7in a\u015fa\u011f\u0131daki dosyalar\u0131 ilgili projeye import etmemiz gerekmektedir.<\/p>\n
JQuery<\/a>
\n KnockoutJS <\/a><\/p>\n
Dikkat!!!<\/em>
\n Yukar\u0131da vemri\u015f oldu\u011fum dosyalar bu yaz\u0131n\u0131n yay\u0131nland\u0131\u011f\u0131 tarihteki son s\u00fcr\u00fcm\u00fcd\u00fcr.\u0130lgili dosyalar\u0131n zamanla g\u00fcncellenmi\u015f s\u00fcr\u00fcmleri yay\u0131nlanm\u0131\u015f olabilir.O y\u00fczden bu uyar\u0131y\u0131 baz alarak \u00e7al\u0131\u015fmalar\u0131n\u0131z\u0131 g\u00fcncel versiyonlarda ger\u00e7ekle\u015ftirmeye dikkat ediniz.<\/em><\/p><\/blockquote>\n
Projeye import edilen dosyalar\u0131 a\u015fa\u011f\u0131daki gibi projeye eklemeliyiz.<\/p>\n
\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<\/pre>\n
\u015eimdi KnockoutJS k\u00fct\u00fcphanesinin MVVM mimarisine uyarlanm\u0131\u015f bir yap\u0131 olu\u015ftural\u0131m.<\/p>\n
\u00d6ncelikle “V:View<\/strong><\/em>” katman\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n
\r\n<table>\r\n <tr>\r\n <td>Ad<\/td>\r\n <td><input data-bind="value: Ad" \/><\/td>\r\n <td data-bind="text: Ad"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Soyad<\/td>\r\n <td><input data-bind="value: Soyad" \/><\/td>\r\n <td data-bind="text: Soyad"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Memleket<\/td>\r\n <td><input data-bind="value: Memleket" \/><\/td>\r\n <td data-bind="text: Memleket"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Ya\u015f<\/td>\r\n <td><input data-bind="value: Yas" \/><\/td>\r\n <td data-bind="text: Yas"><\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Tam Bilgi<\/td>\r\n <td colspan="2" data-bind="text: TamBilgi"><\/td>\r\n <\/tr>\r\n<\/table>\r\n<\/pre>\n
Yukar\u0131daki View yap\u0131s\u0131n\u0131 incelerseniz e\u011fer, kullan\u0131c\u0131ya bir verinin sunuldu\u011fu katman\u0131 \u00f6rneklendirmekteyiz.Dikkat ederseniz e\u011fer, <input> elemanlar\u0131nda “data-bind” objecti kullan\u0131lm\u0131\u015ft\u0131r.Bu object ile nesneleri birbirine ba\u011fl\u0131yoruz.Yani Bind<\/strong> ediyoruz.<\/p>\n
\u00d6rnek olarak Ad b\u00f6l\u00fcm\u00fcn\u00fc ele al\u0131rsak e\u011fer, input eleman\u0131ndaki “data-bind=”value: Ad”” ile td deki “data-bind=”text: Ad”” datalar\u0131n birbirine ba\u011fl\u0131yoruz.Buradaki kullan\u0131mda verilen “Ad” de\u011fi\u015fkeni ViewModel’de ki(yani Datadaki) “Ad” \u00f6zelli\u011finin kar\u015f\u0131l\u0131\u011f\u0131d\u0131r.<\/p>\n
View katman\u0131nda yapt\u0131\u011f\u0131m\u0131z bu i\u015flemler neticesinde art\u0131k ViewModel katman\u0131m\u0131z\u0131 dizayn edebiliriz.<\/p>\n
\r\n<script type="text\/javascript">\r\n function ViewModel() {\r\n Ad = ko.observable("Gen\u00e7ay"),\r\n Soyad = ko.observable("Y\u0131ld\u0131z"),\r\n Memleket = ko.observable("Artvin\/Arhavi"),\r\n Yas = ko.observable(23),\r\n TamBilgi = ko.computed(function () { return this.Ad() + " " + this.Soyad() + " - " + this.Memleket() + " - " + this.Yas() })\r\n };\r\n<\/script>\r\n<\/pre>\n
Yukar\u0131 olu\u015fturmu\u015f oldu\u011fumuz ViewModel yap\u0131s\u0131n\u0131 incelerseniz e\u011fer property de\u011ferleri(Ad, Soyad, Memleket, Yas, TamBilgi) sanki Modelden \u00e7ekilmi\u015f gibi direkt olarak atanm\u0131\u015ft\u0131r.Burada propertylerin Bind edildi\u011fi nesnelere datay\u0131 vermesi i\u00e7i “observable” komutunu kullan\u0131yoruz.Bu komut sayesinde veriler Bind edilen nesnelere yollanacakt\u0131r.Bu \u00f6rne\u011fimizde “observable” metoduna verdi\u011fimiz veriler Bind edilen alanlara otomatik olarak atanacakt\u0131r.<\/p>\n
TamBilgi propertysi i\u00e7in, hesap komutu olan “Computed” kullan\u0131lmaktad\u0131r.”Ad”, “Soyad”, “Memleket” ve “Yas”
\nbirle\u015ftirilmi\u015ftir.Asl\u0131nda TamBilgi, “Ad”, “Soyad”, “Memleket” ve “Yas” propertylerine ba\u011flanm\u0131\u015ft\u0131r.Yani herhangi birinde olu\u015facak de\u011fi\u015fiklik TamBilgi propertysinide direkt olarak etkileyecektir.<\/p>\n
input elemanlar\u0131nda yap\u0131lan de\u011fi\u015fiklikler bind edildikleri alanlara da otomatik yans\u0131yacakt\u0131r.<\/p>\n
Son olarak, olu\u015fturdu\u011fumuz bu yap\u0131y\u0131 sa\u011fl\u0131kl\u0131 bir bi\u00e7imde kullanabilmek i\u00e7in ViewModel’imizi Knockout Objesine Bind etmemiz gerekmektedir.<\/p>\n
\r\n<script type="text\/javascript">\r\n $(document).ready(function () {\r\n ko.applyBindings(ViewModel());\r\n });\r\n<\/script>\r\n<\/pre>\n
Yapm\u0131\u015f oldu\u011fumuz bu i\u015flemler neticesinde a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fclerinden projenin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131 hakk\u0131nda g\u00f6rsel fikriniz olu\u015facakt\u0131r.<\/p>\n
$\"KnockoutJS$ <\/a>
Projenin ilk a\u00e7\u0131ld\u0131\u011f\u0131 an<\/p><\/div>\n
$\"KnockoutJS$ <\/a>
\u00dczerinde g\u00fcncelle\u015ftirme yap\u0131ld\u0131\u011f\u0131 an<\/p><\/div>\n
Evet arkada\u015flar, bu yaz\u0131m\u0131z\u0131nda sonuna gelmi\u015f bulunmaktay\u0131z.Zamanla KnockoutJS \u00fczerinde derinlemesine yaz\u0131lar yazaca\u011f\u0131m.\u015eimdilik burada giri\u015f niteli\u011finde b\u0131rakal\u0131m.<\/p>\n
Bol bol faydalanman\u0131z dile\u011fiyle…<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n
Kaynak : http:\/\/www.borakasmer.com\/knockoutjsi-derinlemesine-inceleme\/<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu yaz\u0131m\u0131zda web sayfalar\u0131nda kaynak kodlar\u0131 olduk\u00e7a sade ve anla\u015f\u0131l\u0131r bir yap\u0131da dizayn etmemizi sa\u011flayan bir JavaScript k\u00fct\u00fcphanesinden bahsedece\u011fiz. Hemen ba\u015flayal\u0131m.. KnockoutJS Nedir? MVVM(Model View ViewModel) Presentation Model mimarisi temelinde tasarlanan bir JavaScript k\u00fct\u00fcphanesidir....<\/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,804,797,800,799,798,284,802,801,805,803,120,807],"class_list":["post-3295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knockoutjs","tag-applybindings","tag-data-bind","tag-knockoutjs","tag-knockoutjs-nasil-kullanilir","tag-knockoutjs-ne-amacla-kullanilir","tag-knockoutjs-nedir","tag-model","tag-model-view-viewmodel","tag-mvvm","tag-observable","tag-presentation-model","tag-view","tag-viewmodel"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3295","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=3295"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3295\/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=3295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}