<\/div>\n
KnockoutJS mimarisinde html elemanlara datalar\u0131m\u0131z\u0131 bind etmek i\u00e7in ko.observable metodunu kullanmaktay\u0131z.Bu metod, datan\u0131n bind edildi\u011fi eleman ile dinamik yap\u0131 sergilemektedir.Kastetti\u011fimiz o ki, ko.observable ile bind edilen nesne ve data yap\u0131lar\u0131ndan herhangi birinde de\u011fi\u015fiklik olursa an\u0131nda bu de\u011fi\u015fiklik di\u011ferinede yans\u0131yacakt\u0131r.<\/p>\n
\r\n<input data-bind="value: Ad" \/>\r\n<label data-bind="text: Ad"><\/label>\r\n\r\n<script type="text\/javascript">\r\n    function VMOrnek() {\r\n        Ad = ko.observable("Gen\u00e7ay");\r\n    }\r\n\r\n    $(document).ready(function () {\r\n        ko.applyBindings(VMOrnek);\r\n    });\r\n<\/script>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer bir “Ad” isminde property tan\u0131mlanm\u0131\u015f ve bu property hem input hemde label elemanlar\u0131yla bind edilmi\u015ftir.”ko.observable” metodu sayesinde bu \u00fc\u00e7l\u00fc ili\u015fkide herhangi bir veri de\u011fi\u015fikli\u011fi s\u00f6z konusu olursa di\u011ferlerinede yans\u0131yacakt\u0131r.<\/p>\n
<\/a>“Gen\u00e7ay” de\u011feri yan\u0131na “Y\u0131ld\u0131z” de\u011ferinide girdi\u011fimiz anda Ad propertyimizdeki de\u011fi\u015fiklik label nesnesinede yans\u0131maktad\u0131r.<\/p><\/div>\n
A\u015fa\u011f\u0131daki farkl\u0131 yap\u0131y\u0131 incelerseniz ne demek istedi\u011fimi daha net anlayacaks\u0131n\u0131z.<\/p>\n\r\n<input data-bind="value: Ad" \/>\r\n<input data-bind="value: Ad" \/>\r\n<script type="text\/javascript">\r\n    function VMOrnek() {\r\n        Ad = ko.observable("Gen\u00e7ay");\r\n    }\r\n\r\n    $(document).ready(function () {\r\n        ko.applyBindings(VMOrnek);\r\n    });\r\n<\/script>\r\n<\/pre>\nDikkat ederseniz iki adet input eleman\u0131 ayn\u0131 property ile bind edilmi\u015ftir.\u015eimdi herhangi birisinde olan de\u011fi\u015fiklik di\u011fer inputuda etkileyecektir.
\n<\/a>Soldaki se\u00e7ili inputta de\u011fer de\u011fi\u015ftirildi\u011finde…<\/p><\/div><\/p>\n<\/a>Sa\u011fdaki se\u00e7ili inputta de\u011fer de\u011fi\u015ftirildi\u011finde…<\/p><\/div>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi ko.observable metodu bind edilen data ile elemanlar aras\u0131nda dinamik bir seyir izlemektedir.<\/p>\n
Peki, ko.observable kullanmadan dinamik rol \u00fcstlenmeyen tarzda bir property kullan\u0131m\u0131 nas\u0131l ger\u00e7ekle\u015ftirilir?<\/strong><\/em> diye sorarsan\u0131z e\u011fer a\u015fa\u011f\u0131daki kod blo\u011funu inceleyiniz…<\/p>\n\r\n<input data-bind="value: Ad" \/>\r\n<input data-bind="value: Ad" \/>\r\n\r\n<label data-bind="text: Ad"><\/label>\r\n<script type="text\/javascript">\r\n    function VMOrnek() {\r\n        Ad = "Gen\u00e7ay";\r\n    }\r\n\r\n    $(document).ready(function () {\r\n        ko.applyBindings(VMOrnek);\r\n    });\r\n<\/script>\r\n<\/pre>\nYukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “Ad” isimli propertyi ko.observable metodu olmaks\u0131z\u0131n kullanmakt\u0131r.
\n<\/a>
\nEkran g\u00f6r\u00fcnt\u00fcs\u00fcnden g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “Ad” isimli propertynin bind edildi\u011fi hi\u00e7 bir elemanda veri de\u011fi\u015fikli\u011fi olmamaktad\u0131r.<\/p>\n
Bu i\u00e7eri\u011fimizde KnockoutJS k\u00fct\u00fcphanesinde olduk\u00e7a kullan\u0131\u015fl\u0131 ko.observable metodunu incelemi\u015f olduk.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar..<\/p>\n","protected":false},"excerpt":{"rendered":"
KnockoutJS mimarisinde html elemanlara datalar\u0131m\u0131z\u0131 bind etmek i\u00e7in ko.observable metodunu kullanmaktay\u0131z.Bu metod, datan\u0131n bind edildi\u011fi eleman ile dinamik yap\u0131 sergilemektedir.Kastetti\u011fimiz o ki, ko.observable ile bind edilen nesne ve data yap\u0131lar\u0131ndan herhangi birinde de\u011fi\u015fiklik olursa...<\/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":[797,819,829,805],"class_list":["post-3366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knockoutjs","tag-knockoutjs","tag-ko","tag-ko-observable","tag-observable"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3366","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=3366"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3366\/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=3366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}