<\/div>\n
KnockoutJS mimarisinde bir dizi i\u00e7indeki elemanlar\u0131 belirli \u015fartlara g\u00f6re filtreleme i\u015flemlerini “ko.utils” alt\u0131ndaki “arrayFilter” metodu ile ger\u00e7ekle\u015ftirebiliriz.\u015eimdi gelin beraber bu konu \u00fczerinde \u00f6rneklendirme yapal\u0131m.<\/p>\n
Elimizde a\u015fa\u011f\u0131daki gibi bir arkada\u015f\u0131 modelleyen “Arkadas” isimli model olsun.<\/p>\n
\r\n    function Arkadas(Adi, SoyAdi, Yasi, MedeniHali) {\r\n        return {\r\n            Ad: Adi,\r\n            Soyad: SoyAdi,\r\n            Yas: Yasi,\r\n            MedeniHal: MedeniHali\r\n        };\r\n    }\r\n<\/pre>\n\u015eimdi ViewModelimizi yazal\u0131m.<\/p>\n
\r\n    function VMArkadaslar() {\r\n        Arkadaslar = ko.observableArray([\r\n            new Arkadas("Gen\u00e7ay", "Y\u0131ld\u0131z", 25, false),\r\n            new Arkadas("Hilmi", "Celayir", 35, true),\r\n            new Arkadas("Canan", "Aytun", 28, true),\r\n            new Arkadas("Mustafa", "\u00c7orumlu", 25, true),\r\n            new Arkadas("Sabri", "Maltepe", 25, false),\r\n            new Arkadas("G\u00fclten", "Dursun", 16, false)\r\n        ]);\r\n    }\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi ViewModelimizde “Arkadaslar” isminde bir dizi tan\u0131mlam\u0131\u015f ve i\u00e7ine Arkadas nesnelerini eklemi\u015f olduk.<\/p>\n
“MedeniHali” isimli property bool tipinden de\u011fer ta\u015f\u0131maktad\u0131r.\u015eimdi medeni hali bekar olan arkada\u015flar\u0131 filtreleyelim.<\/p>\n
\r\n    function VMArkadaslar() {\r\n        Arkadaslar = ko.observableArray([\r\n           new Arkadas("Gen\u00e7ay", "Y\u0131ld\u0131z", 25, false),\r\n            new Arkadas("Hilmi", "Celayir", 35, true),\r\n           new Arkadas("Canan", "Aytun", 28, true),\r\n            new Arkadas("Mustafa", "\u00c7orumlu", 25, true),\r\n           new Arkadas("Sabri", "Maltepe", 25, false),\r\n            new Arkadas("G\u00fclten", "Dursun", 16, false)\r\n        ]);\r\n\r\n        Bekarlar = ko.computed(\r\n            function () {\r\n                return ko.utils.arrayFilter(Arkadaslar(), function (Arkadas) { return !Arkadas.MedeniHal });\r\n            })\r\n    }\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer, ViewModelimizde “Bekarlar” isimli bir property olu\u015fturduk ve ko.utils.arrayFilter ile “Arkadaslar” dizisi i\u00e7erisinde MedeniHal \u00f6zelliklerine g\u00f6re filtreleme i\u015flemi ger\u00e7ekle\u015ftirdik.Tabi bu i\u015flemleri hesaplama komutu olan ko.computed metodu i\u00e7erisinde ger\u00e7ekle\u015ftirmi\u015f olduk.<\/p>\n
\u015eimdi bu iki diziyide template yap\u0131s\u0131n\u0131 kullanarak listeleyelim.<\/p>\n
\r\n<table width="25%">\r\n    <tr>\r\n        <td>T\u00fcm arkada\u015flar\u0131n say\u0131s\u0131 <label style="color:red;" data-bind="text: Arkadaslar().length"><\/label><\/td>\r\n        <td>Bekar arkada\u015flar\u0131n say\u0131s\u0131 <label style="color:red;" data-bind="text: Bekarlar().length"><\/label><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td>\r\n            <div>\r\n                <ul data-bind="template: { name: 'ArkadaslarTemplate', foreach: Arkadaslar }"><\/ul>\r\n            <\/div>\r\n        <\/td>\r\n        <td>\r\n            <div>\r\n                <ul data-bind="template: { name: 'BekarlarTemplate', foreach: Bekarlar }"><\/ul>\r\n            <\/div>\r\n        <\/td>\r\n    <\/tr>\r\n<\/table>\r\n\r\n<script id="ArkadaslarTemplate" type="text\/html">\r\n    <li>\r\n        <strong>Ad\u0131 : <\/strong>\r\n        <span data-bind="text: Ad"><\/span>\r\n        <br \/>\r\n        <strong>Soyad\u0131 : <\/strong>\r\n        <span data-bind="text: Soyad"><\/span>\r\n    <\/li>\r\n<\/script>\r\n\r\n<script id="BekarlarTemplate" type="text\/html">\r\n    <li>\r\n        <strong>Ad\u0131 : <\/strong>\r\n        <span data-bind="text: Ad"><\/span>\r\n        <br \/>\r\n        <strong>Soyad\u0131 : <\/strong>\r\n        <span data-bind="text: Soyad"><\/span>\r\n    <\/li>\r\n<\/script>\r\n<\/pre>\n<\/a><\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi arrayFilter ile rahatl\u0131kla dizilerde filtreleme i\u015flemlerimizi ger\u00e7ekle\u015ftirebiliyoruz.<\/p>\n
\u00c7al\u0131\u015fmam\u0131z\u0131n tam halini a\u015fa\u011f\u0131da tekrardan derliyorum.<\/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    <script src="~\/Content\/JQueryKutuphane.js"><\/script>\r\n<\/head>\r\n<body>\r\n<table width="25%">\r\n    <tr>\r\n        <td>T\u00fcm arkada\u015flar\u0131n say\u0131s\u0131 <label style="color:red;" data-bind="text: Arkadaslar().length"><\/label><\/td>\r\n        <td>Bekar arkada\u015flar\u0131n say\u0131s\u0131 <label style="color:red;" data-bind="text: Bekarlar().length"><\/label><\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td>\r\n            <div>\r\n                <ul data-bind="template: { name: 'ArkadaslarTemplate', foreach: Arkadaslar }"><\/ul>\r\n            <\/div>\r\n        <\/td>\r\n        <td>\r\n            <div>\r\n                <ul data-bind="template: { name: 'BekarlarTemplate', foreach: Bekarlar }"><\/ul>\r\n            <\/div>\r\n        <\/td>\r\n    <\/tr>\r\n<\/table>\r\n<script id="ArkadaslarTemplate" type="text\/html">\r\n    <li>\r\n        <strong>Ad\u0131 : <\/strong>\r\n        <span data-bind="text: Ad"><\/span>\r\n        <br \/>\r\n        <strong>Soyad\u0131 : <\/strong>\r\n        <span data-bind="text: Soyad"><\/span>\r\n    <\/li>\r\n<\/script>\r\n<script id="BekarlarTemplate" type="text\/html">\r\n    <li>\r\n        <strong>Ad\u0131 : <\/strong>\r\n        <span data-bind="text: Ad"><\/span>\r\n        <br \/>\r\n        <strong>Soyad\u0131 : <\/strong>\r\n        <span data-bind="text: Soyad"><\/span>\r\n    <\/li>\r\n<\/script>\r\n\r\n<script type="text\/javascript">\r\n    function VMArkadaslar() {\r\n        Arkadaslar = ko.observableArray([\r\n           new Arkadas("Gen\u00e7ay", "Y\u0131ld\u0131z", 25, false),\r\n            new Arkadas("Hilmi", "Celayir", 35, true),\r\n           new Arkadas("Canan", "Aytun", 28, true),\r\n            new Arkadas("Mustafa", "\u00c7orumlu", 25, true),\r\n           new Arkadas("Sabri", "Maltepe", 25, false),\r\n            new Arkadas("G\u00fclten", "Dursun", 16, false)\r\n        ]);\r\n\r\n        Bekarlar = ko.computed(\r\n            function () {\r\n                return ko.utils.arrayFilter(Arkadaslar(), function (Arkadas) { return !Arkadas.MedeniHal });\r\n            })\r\n\r\n    }\r\n    function Arkadas(Adi, SoyAdi, Yasi, MedeniHali) {\r\n        return {\r\n            Ad: Adi,\r\n            Soyad: SoyAdi,\r\n            Yas: Yasi,\r\n            MedeniHal: MedeniHali\r\n        };\r\n    }\r\n    $(document).ready(function () {\r\n        ko.applyBindings(VMArkadaslar);\r\n    });\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
KnockoutJS mimarisinde bir dizi i\u00e7indeki elemanlar\u0131 belirli \u015fartlara g\u00f6re filtreleme i\u015flemlerini “ko.utils” alt\u0131ndaki “arrayFilter” metodu ile ger\u00e7ekle\u015ftirebiliriz.\u015eimdi gelin beraber bu konu \u00fczerinde \u00f6rneklendirme yapal\u0131m. Elimizde a\u015fa\u011f\u0131daki gibi bir arkada\u015f\u0131 modelleyen “Arkadas” isimli model olsun....<\/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":[824,732,797,825,827,826],"class_list":["post-3356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knockoutjs","tag-arrayfilter","tag-filtreleme","tag-knockoutjs","tag-knockoutjs-filtreleme","tag-ko-utils","tag-ko-utils-arrayfilter"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3356","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=3356"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3356\/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=3356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}