KnockoutJS’de arrayFilter İle Dizi Filtreleme İşlemleri

KnockoutJS mimarisinde bir dizi içindeki elemanları belirli şartlara göre filtreleme işlemlerini “ko.utils” altındaki “arrayFilter” metodu ile gerçekleştirebiliriz.Şimdi gelin beraber bu konu üzerinde örneklendirme yapalım.

Elimizde aşağıdaki gibi bir arkadaşı modelleyen “Arkadas” isimli model olsun.

    function Arkadas(Adi, SoyAdi, Yasi, MedeniHali) {
        return {
            Ad: Adi,
            Soyad: SoyAdi,
            Yas: Yasi,
            MedeniHal: MedeniHali
        };
    }

Şimdi ViewModelimizi yazalım.

    function VMArkadaslar() {
        Arkadaslar = ko.observableArray([
            new Arkadas("Gençay", "Yıldız", 25, false),
            new Arkadas("Hilmi", "Celayir", 35, true),
            new Arkadas("Canan", "Aytun", 28, true),
            new Arkadas("Mustafa", "Çorumlu", 25, true),
            new Arkadas("Sabri", "Maltepe", 25, false),
            new Arkadas("Gülten", "Dursun", 16, false)
        ]);
    }

Gördüğünüz gibi ViewModelimizde “Arkadaslar” isminde bir dizi tanımlamış ve içine Arkadas nesnelerini eklemiş olduk.

“MedeniHali” isimli property bool tipinden değer taşımaktadır.Şimdi medeni hali bekar olan arkadaşları filtreleyelim.

    function VMArkadaslar() {
        Arkadaslar = ko.observableArray([
           new Arkadas("Gençay", "Yıldız", 25, false),
            new Arkadas("Hilmi", "Celayir", 35, true),
           new Arkadas("Canan", "Aytun", 28, true),
            new Arkadas("Mustafa", "Çorumlu", 25, true),
           new Arkadas("Sabri", "Maltepe", 25, false),
            new Arkadas("Gülten", "Dursun", 16, false)
        ]);

        Bekarlar = ko.computed(
            function () {
                return ko.utils.arrayFilter(Arkadaslar(), function (Arkadas) { return !Arkadas.MedeniHal });
            })
    }

Yukarıdaki kod bloğunu incelerseniz eğer, ViewModelimizde “Bekarlar” isimli bir property oluşturduk ve ko.utils.arrayFilter ile “Arkadaslar” dizisi içerisinde MedeniHal özelliklerine göre filtreleme işlemi gerçekleştirdik.Tabi bu işlemleri hesaplama komutu olan ko.computed metodu içerisinde gerçekleştirmiş olduk.

Şimdi bu iki diziyide template yapısını kullanarak listeleyelim.

<table width="25%">
    <tr>
        <td>Tüm arkadaşların sayısı <label style="color:red;" data-bind="text: Arkadaslar().length"></label></td>
        <td>Bekar arkadaşların sayısı <label style="color:red;" data-bind="text: Bekarlar().length"></label></td>
    </tr>
    <tr>
        <td>
            <div>
                <ul data-bind="template: { name: 'ArkadaslarTemplate', foreach: Arkadaslar }"></ul>
            </div>
        </td>
        <td>
            <div>
                <ul data-bind="template: { name: 'BekarlarTemplate', foreach: Bekarlar }"></ul>
            </div>
        </td>
    </tr>
</table>

<script id="ArkadaslarTemplate" type="text/html">
    <li>
        <strong>Adı : </strong>
        <span data-bind="text: Ad"></span>
        <br />
        <strong>Soyadı : </strong>
        <span data-bind="text: Soyad"></span>
    </li>
</script>

<script id="BekarlarTemplate" type="text/html">
    <li>
        <strong>Adı : </strong>
        <span data-bind="text: Ad"></span>
        <br />
        <strong>Soyadı : </strong>
        <span data-bind="text: Soyad"></span>
    </li>
</script>

KnockoutJS'de arrayFilter İle Dizi Filtreleme İşlemleri

Gördüğünüz gibi arrayFilter ile rahatlıkla dizilerde filtreleme işlemlerimizi gerçekleştirebiliyoruz.

Çalışmamızın tam halini aşağıda tekrardan derliyorum.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/knockout-3.3.0.js"></script>
    <script src="~/Content/JQueryKutuphane.js"></script>
</head>
<body>
<table width="25%">
    <tr>
        <td>Tüm arkadaşların sayısı <label style="color:red;" data-bind="text: Arkadaslar().length"></label></td>
        <td>Bekar arkadaşların sayısı <label style="color:red;" data-bind="text: Bekarlar().length"></label></td>
    </tr>
    <tr>
        <td>
            <div>
                <ul data-bind="template: { name: 'ArkadaslarTemplate', foreach: Arkadaslar }"></ul>
            </div>
        </td>
        <td>
            <div>
                <ul data-bind="template: { name: 'BekarlarTemplate', foreach: Bekarlar }"></ul>
            </div>
        </td>
    </tr>
</table>
<script id="ArkadaslarTemplate" type="text/html">
    <li>
        <strong>Adı : </strong>
        <span data-bind="text: Ad"></span>
        <br />
        <strong>Soyadı : </strong>
        <span data-bind="text: Soyad"></span>
    </li>
</script>
<script id="BekarlarTemplate" type="text/html">
    <li>
        <strong>Adı : </strong>
        <span data-bind="text: Ad"></span>
        <br />
        <strong>Soyadı : </strong>
        <span data-bind="text: Soyad"></span>
    </li>
</script>

<script type="text/javascript">
    function VMArkadaslar() {
        Arkadaslar = ko.observableArray([
           new Arkadas("Gençay", "Yıldız", 25, false),
            new Arkadas("Hilmi", "Celayir", 35, true),
           new Arkadas("Canan", "Aytun", 28, true),
            new Arkadas("Mustafa", "Çorumlu", 25, true),
           new Arkadas("Sabri", "Maltepe", 25, false),
            new Arkadas("Gülten", "Dursun", 16, false)
        ]);

        Bekarlar = ko.computed(
            function () {
                return ko.utils.arrayFilter(Arkadaslar(), function (Arkadas) { return !Arkadas.MedeniHal });
            })

    }
    function Arkadas(Adi, SoyAdi, Yasi, MedeniHali) {
        return {
            Ad: Adi,
            Soyad: SoyAdi,
            Yas: Yasi,
            MedeniHal: MedeniHali
        };
    }
    $(document).ready(function () {
        ko.applyBindings(VMArkadaslar);
    });
</script>
</body>
</html>

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*