Knockout.js teknolojisi

Merhaba değerli okuyucular,

Bugün Microsoft firmasının da desteklediği knockout teknolojisini anlatacağım ve kendimde bunun yanında bir uygulama yapacağım. 

Resmi sitesini buradan ve kendi öğreticisini(learnig) buradan erişebilirsiniz. Knockout kaynak bir javascript koddur, MIT license sahip olarak GitHub yayınlanmaktadırç Bu sistem MVVM sistemini(model, view, viewModel), object-oriented JavaScripts ve declarative bindings teknolojilerini barındırmaktadır. IE 6+, Mozzilla 2+, Chrome ve diğer tarayıcıları destelemektedir.

Biz bu teknoloji ile client-side tarafında zengin interaktif uygulamar yazabiliriz. Ben bir projeyi geliştirerek yazacağım. Microsoft dan Steve Sandersen bir webinerinde geliştirdiği uygulamayı yazacağım, farkı aynı senaryoyu kullanarak yeni yazım formatıyla yazacağım.

İlk olarak Boş internet şablonlu bir MVC4 proje uygulaması açalım.

 

<script src="/Scripts/knockout-2.2.0.js" type="text/javascript"></script>
<h1>İlk kodlar</h1>
<p>Ad <span data-bind="text:Ad">adım </span></p>
<p>Soyad <span data-bind="text:SoyAd">soyadım </span></p>

<script>
    function View() {
        this.Ad = "kemal";
        this.SoyAd="Mustafa";
    }

    ko.applyBindings(new View);
</script>

----------------------------------------

<p>Ad <span data-bind="text:Ad">adım </span></p>
<p>Soyad <span data-bind="text:SoyAd">soyadım </span></p>

<p>Ad <span data-bind="text: Ad">adım </span></p>
<p>Soyad <span data-bind="text: SoyAd">soyadım </span></p>



-----------------------------------------


<p>Ad <span data-bind="text:Ad">adım </span></p>
<p>Soyad <span data-bind="text:SoyAd">soyadım </span></p>

<p>Ad <input data-bind="value: Ad">adım </input></p>
<p>Soyad <input data-bind="value: SoyAd">soyadım </input></p>

<script>
    function View() {
        this.Ad = "kemal";
        this.SoyAd="Mustafa";
    }

    ko.applyBindings(new View);
</script>

-------------------------------------------- <p>Ad <span data-bind="text:Ad">adım </span></p> <p>Soyad <span data-bind="text:SoyAd">soyadım </span></p> <p>Ad <input data-bind="value: Ad"> </input></p> <p>Soyad <input data-bind="value: SoyAd"> </input></p> <script> function View() { this.Ad = ko.observable("kemal"); this.SoyAd=ko.observable("Mustafa"); } ko.applyBindings(new View); </script> ---------------------------------------- <p>Ad <span data-bind="text:Ad">adım </span></p> <p>Soyad <span data-bind="text:SoyAd">soyadım </span></p> <p>Ad <input data-bind="value: Ad"> </input></p> <p>Soyad <input data-bind="value: SoyAd"> </input></p> <p>Ad ve Soyad <span data-bind="text: AdSoyad"> </span></p> <script> function View() { this.Ad = ko.observable("kemal"); this.SoyAd = ko.observable("Mustafa"); this.AdSoyad = ko.computed(function () { return this.Ad() + " " + this.SoyAd(); },this); } ko.applyBindings(new View); </script> ----------------------------------------------- <p>Ad <span data-bind="text:Ad">adım </span></p> <p>Soyad <span data-bind="text:SoyAd">soyadım </span></p> <p>Ad <input data-bind="value: Ad"> </input></p> <p>Soyad <input data-bind="value: SoyAd"> </input></p> <p>Ad ve Soyad <span data-bind="text: AdSoyad"> </span></p> <button data-bind="click: Buyuk">Buyuk Harf Yap</button> <script> function View() { this.Ad = ko.observable("kemal"); this.SoyAd = ko.observable("Mustafa"); this.AdSoyad = ko.computed(function () { return this.Ad() + " " + this.SoyAd(); },this); this.Buyuk = function () { var buyukHarf = this.SoyAd(); this.SoyAd(buyukHarf.toUpperCase()); }; } ko.applyBindings(new View); </script> ------------------------------------------------ <script src="/Scripts/knockout-2.2.0.js" type="text/javascript"></script> <h1>İlk kodlar</h1> <p>Ad <input data-bind="value: Ad"> </input></p> <p>Soyad <input data-bind="value: SoyAd"> </input></p> <p>Ad ve Soyad <span data-bind="text: AdSoyad"> </span></p> <h2>Arkadaşlar :</h2> <ul data-bind="foreach:Arkadaslar"> <li data-bind="text:name"> </li> </ul> <script> function Arkadas(name) { this.name = name; } function View() { this.Ad = ko.observable("kemal"); this.SoyAd = ko.observable("Mustafa"); this.AdSoyad = ko.computed(function () { return this.Ad() + " " + this.SoyAd(); }, this); this.ekle = function () { this.Arkadaslar.push(new Arkadas("Başka Arkadaşım")); } this.Arkadaslar = ko.observableArray([ new Arkadas("Erkan"), new Arkadas("Ayhan"), new Arkadas("Murat") ]); } ko.applyBindings(new View); </script> -------------------------------------------

Şimdi kolleksiyon, databind ve ekleme işlemleri yaparak projemizi geliştirelim.

<p>Ad <input data-bind="value: Ad"> </input></p>
<p>Soyad <input data-bind="value: SoyAd"> </input></p>

<h2>Arkadaşlar :</h2>
<ul data-bind="foreach:Arkadaslar">
        <li data-bind="text:name"> </li>
</ul>

<button data-bind="click: ekle">Arkadaş Ekle</button>

<script>
    function Arkadas(name) {
        this.name = name;
    }

    function View() {
        this.Ad = ko.observable("kemal");
        this.SoyAd = ko.observable("Mustafa");
        this.AdSoyad = ko.computed(function () {
            return this.Ad() + "  " + this.SoyAd();
        }, this);

        this.ekle = function () {
            this.Arkadaslar.push(new Arkadas("Başka Arkadaşım"));
        }

        this.Arkadaslar = ko.observableArray([
            new Arkadas("Erkan"),
            new Arkadas("Ayhan"),
            new Arkadas("Murat")
        ]);

    }

    ko.applyBindings(new View);
</script>

Şimdi ben bu koda silme kodu ekleyeceğim. Fakat 2 farklı yöntemle eklemek istiyorum. Birinci table ile ve diğeri ise bir script kod oluşturarak ekliyorum..

<script src="/Scripts/knockout-2.2.0.js" type="text/javascript"></script>
<h1>İlk kodlar</h1>

<p>Ad <input data-bind="value: Ad"/></p>
<p>Soyad <input data-bind="value: SoyAd"/> </p>
<p>Ad Soyad <strong data-bind="text: AdSoyad"> </strong></p>

@*<div data-bind="template: 'ArkadaslarTemp'"></div>*@

<h2>Arkadaşlar :</h2>

<table>
    <thead><tr>
        <th>Arkadaslar</th><th>İşlemler</th><th>Facebook</th>
    </tr></thead>
    <tbody data-bind="foreach: Arkadaslar">
        <tr>
            <td><input data-bind="value: name"/></td>
            <td><a href="#" data-bind="click: $root.sil">silin</a></td>
        </tr>    
    </tbody>
</table>
<ul data-bind="template : {name:'Ftemp',foreach: Arkadaslar}"></ul>


<script id="Ftemp" type="text/html">
    <li>
     <input data-bind="value: name"/> 
    <button data-bind="click: $root.sil"> silin </button>
    </li>
</script>

<button data-bind="click: ekle">Arkadaş Ekle</button>


<script>
    function friend(name) {
        var self = this;
        self.name = ko.observable(name);
    }

    function View() {
        var self = this;

        self.Ad = ko.observable("kemal");
        self.SoyAd = ko.observable("Mustafa");
        
        self.AdSoyad = ko.computed(function () {
            return this.Ad() + "  " + this.SoyAd();
        }, this);

        self.Arkadaslar = ko.observableArray([
            new friend("Erkan"),
            new friend("Ayhan"),
            new friend("Murat")
        ]);


        self.ekle = function () {
            self.Arkadaslar.push(new friend("Başka Arkadaşım"));
        }

        self.sil = function (name) {
            self.Arkadaslar.remove(name);
        }
    }

    ko.applyBindings(new View());
</script>

 Daha Sonra ben buna face adresi varmı, face adresi gibi alanlar ekliyorum. Face adresi boolean değere göre face adresini gizletiyorum Ayrıca arkadaslar kolleksiyonun değerini yukarıdaki h2 etiketine ekliyorum.. Sonrada Arkadaş ekle butonuna 6 arkadaş ekleeycek şekilde enable değerini Arkadaslar().length<6 gibi bir şarta bağladım.

<script src="/Scripts/knockout-2.2.0.js" type="text/javascript"></script>
<h1>İlk kodlar</h1>

<p>Ad <input data-bind="value: Ad"/></p>
<p>Soyad <input data-bind="value: SoyAd"/> </p>
<p>Ad Soyad <strong data-bind="text: AdSoyad"> </strong></p>

@*<div data-bind="template: 'ArkadaslarTemp'"></div>*@

<h2>Arkadaşlar(<span data-bind="text: Arkadaslar().length"></span>)</h2>

<table>
    <thead><tr>
        <th>Arkadaslar Tablosu</th><th>İşlemler</th><th>Facebook Varmı</th><th>Facebook Adress</th>
    </tr></thead>
    <tbody data-bind="foreach: Arkadaslar">
        <tr>
            <td><input data-bind="value: name"/></td>
            <td><a href="#" data-bind="click: $root.sil">silin</a></td>
            <td><label><input type="checkbox" data-bind="checked: FaceVarmi"/>FaceVarmı</label></td>
            <td><input data-bind="value: FaceAdres, visible: FaceVarmi"/></td>
        </tr>    
    </tbody>
</table>

<h3>Arkadaşlar Listesi</h3>
<ul data-bind="template: { name: 'Ftemp', foreach: Arkadaslar }"></ul>


<script id="Ftemp" type="text/html">
    <li>
    <input data-bind="value: name"/>
    <input data-bind="value: SoyAd"/>
    <label><input type="checkbox" data-bind="checked: FaceVarmi"/>FaceVarmi</label>
    <input data-bind="value: FaceAdres, visible:FaceVarmi"/>
    <button data-bind="click: $root.sil"> silin </button>
    </li>
</script>

<button data-bind="click: ekle, enable:Arkadaslar().length<6">Arkadaş Ekle</button>


<script>
    function friend(name,soyad,val) {
        var self = this;
        self.name = ko.observable(name);
        self.SoyAd = ko.observable(soyad);
        self.FaceVarmi = ko.observable(val);
        self.FaceAdres = ko.observable();
    }

    function View() {
        var self = this;

        self.Ad = ko.observable("kemal");
        self.SoyAd = ko.observable("özler");

        self.AdSoyad = ko.computed(function () {
            return this.Ad() + "  " + this.SoyAd();
        }, this);

        self.Arkadaslar = ko.observableArray([
            new friend("Erkan", "yürek",true),
            new friend("Ayhan"," ballı", false),
            new friend("Murat", "Can",false)
        ]);


        self.ekle = function () {
            self.Arkadaslar.push(new friend("Başka Arkadaşım"));
        }

        self.sil = function (name) {
            self.Arkadaslar.remove(name);
        }
    }

    ko.applyBindings(new View());
</script>

Kodun En sonunda Json tipinde veriyi ajax ile conroler a görderdim..

<script src="/Scripts/knockout-2.2.0.js" type="text/javascript"></script>
<h1>İlk kodlar</h1>

<p>Ad <input data-bind="value: Ad"/></p>
<p>Soyad <input data-bind="value: SoyAd"/> </p>
<p>Ad Soyad <strong data-bind="text: AdSoyad"> </strong></p>

<h2>Arkadaşlar(<span data-bind="text: Arkadaslar().length"></span>)</h2>

<table>
    <thead><tr>
        <th>Arkadaslar Tablosu</th><th>İşlemler</th><th>Facebook Varmı</th><th>Facebook Adress</th>
    </tr></thead>
    <tbody data-bind="foreach: Arkadaslar">
        <tr>
            <td><input data-bind="value: name"/></td>
            <td><a href="#" data-bind="click: $root.sil">silin</a></td>
            <td><label><input type="checkbox" data-bind="checked: FaceVarmi"/>FaceVarmı</label></td>
            <td><input data-bind="value: FaceAdres, visible: FaceVarmi"/></td>
        </tr>    
    </tbody>
</table>

<h3>Arkadaşlar Listesi</h3>
<ul data-bind="template: { name: 'Ftemp', foreach: Arkadaslar }"></ul>


<script id="Ftemp" type="text/html">
    <li>
    <input data-bind="value: name"/>
    <input data-bind="value: SoyAd"/>
    <label><input type="checkbox" data-bind="checked: FaceVarmi"/>FaceVarmi</label>
    <input data-bind="value: FaceAdres, visible:FaceVarmi"/>
    <button data-bind="click: $root.sil"> silin </button>
    </li>
</script>

<button data-bind="click: ekle, enable:Arkadaslar().length<6">Arkadaş Ekle</button>
<button data-bind="click: save">save</button>

<script>
    function friend(name,soyad,val,adres) {
        var self = this;
        self.name = ko.observable(name);
        self.SoyAd = ko.observable(soyad);
        self.FaceVarmi = ko.observable(val);
        self.FaceAdres = ko.observable(adres);
    }

    function View() {
        var self = this;

        self.Ad = ko.observable("kemal");
        self.SoyAd = ko.observable("özler");

        self.AdSoyad = ko.computed(function () {
            return this.Ad() + "  " + this.SoyAd();
        }, this);

        self.Arkadaslar = ko.observableArray([
            new friend("Erkan", "yürek",true,"www.facebook.com/canercanli"),
            new friend("Ayhan"," ballı", false,null),
            new friend("Murat", "Can",true,"www.facebook.com/muratcan")
        ]);

        self.ekle = function () {
            self.Arkadaslar.push(new friend("Başka Arkadaşım"));
        }

        self.sil = function (name) {
            self.Arkadaslar.remove(name);

        }            
        self.save= function () {
            $.ajax({
                url:"@Url.Action("Save","Home")",
                type: "post",
                data: ko.toJSON(this),
                contentType: "application/json",                
                success:function (result) { alert(result);   }
            });
        }
    }

    ko.applyBindings(new View());
</script>

Modellerimm;

public class Calisan
    {
        public string Ad {get;set;}
        public string SoyAd { get; set; }
        public string AdSoyad { get; set; }
        public ICollection<Arkadas> Arkadaslar { get; set; }
    }

    public class Arkadas
    {
        public string name { get; set; }
        public string SoyAd { get; set; }
        public string FaceAdres { get; set; }
        public bool FaceVarmi { get; set; }
    }

Action methot ;

[HttpPost]
        public JsonResult Save(Calisan person)
        {
            string mesaj = string.Format(" Kaydedildi {0} ", person.AdSoyad);
            mesaj += string.Format(" {0} arkadas ile,", person.Arkadaslar.Count);
            mesaj += string.Format(" {0} facebooklu  arkadşı kaydedildi.", person.Arkadaslar.Where(x => x.FaceVarmi).Count());
            return Json(mesaj, JsonRequestBehavior.AllowGet);
        }

 

Bir sonraki yazımda görüşmek üzere hoşçakalın.

 z

 

Add comment

The file '/Custom/Widgets/Calendar/widget.cshtml' does not exist.The file '/Custom/Widgets/Category list/widget.cshtml' does not exist.The file '/Custom/Widgets/Tag cloud/widget.cshtml' does not exist.The file '/Custom/Widgets/Page List/widget.cshtml' does not exist.The file '/Custom/Widgets/Month List/widget.cshtml' does not exist.