TypeScript’de Cast İşlemleri Ve KnockoutJs
Selamlar;
Bugün TypeScript’de cast işlemleri ve KnockoutJS ile nasıl çalıştığı üzerine birkaç örnek yapacağız.
Çok basit toplama ve çıkarma işlemi yapan aşağıdaki gibi bir Index.cshtml view yaratıyoruz: “X” ve “Y” id’li iki input alan ve “Topla”,”Çıkar” buttonları bulunmaktadır. İşlem sonucu “OutPut” id’li bir div’in içine yazılmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Calculate</title> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/Convert.js"></script> </head> <body> <div> X:<input type="text" id="X" /> Y:<input type="text" id="Y" /> <br /><br /> <div> <button id="Add">Topla</button> <button id="Subtract">Çıkar</button> </div> <br /> <div id="OutPut"></div> </div> </body> </html> |
Şimdi sıra geldi aşağıdaki gibi bir Convert.ts dosyası yazmaya: Görüldüğü gibi “Calculator” adında bir class oluşturulmuştur. “X”,”Y” ve”output” adında 3 tane “HTMLInputElement” ve “HTMLSpanElement” şeklinde bir değişkeni bulunmaktadır. Constructor’ında “<HTMLInputElement>” şeklinde cast işlemi yapılarak gelen “ID” li nesneler ilgili değişkenlere atanır. “HTMLInputElemet” tipi F12 ile kaynağına gidilir ise “lib.d.ts” dosyasına erişilir. Burası typescript için çeşitli tanımlamaların yapıldığı bir kütüpahanedir. Daha sonra da wiredEvent() methodu çağrılır. Bu method’da “Add” ve “Subtract” buttonlarının clicklenme durumunda ilgili “X” ve “Y” değişkenleri toplanmış yada çıkartılmıştır. Elde edilen sonuç “output” spanının içine yazılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$(document).ready(function () { var _calc = new Calculator('X', 'Y', 'OutPut'); }); class Calculator { private X: HTMLInputElement; private Y: HTMLInputElement; private output: HTMLSpanElement; constructor(xID: string, yID: string, outputID: string) { this.X = <HTMLInputElement>document.getElementById(xID); this.Y = <HTMLInputElement>document.getElementById(yID); this.output = <HTMLSpanElement>document.getElementById(outputID); this.wiredEvents(); } wiredEvents() { document.getElementById('Add').addEventListener('click', event=> { this.output.innerHTML = this.add(parseInt(this.X.value), parseInt(this.Y.value)).toString(); }); document.getElementById('Subtract').addEventListener('click', event=> { this.output.innerHTML = this.subtruct(parseInt(this.X.value), parseInt(this.Y.value)).toString(); }); } add(x: number, y: number) { return x + y; } subtruct(x: number, y: number) { return x - y; } } |
Aşağıda Convert.ts’in dönüştürüldüğü Convert.js karşılığı görülmektedir.
Ekran çıktısı aşağıdaki gibidir.
Şimdi bir de cast işlemine gerek kalmadan JQuery formatında aynı işlemi nasıl yapabiliriz onu inceleyelim. Öncelikle JQuery formatının tanımlanabilmesi için alttaki kütüpahanenin indirilmesi gerekmektedir. Böylece bir nesnenin “ID”‘si verildiğinde ilgili nesneye JQuery tipinde aşağıdaki gibi erişilebilir.
Aşağıda önceki örnekden farklı olarak “IMathOperation” interface’i yaratılmış ve ilgili “X”,”Y” “wireEvents()” methodu tanımlanmıştır. Daha sonra “Calculator” class’ı bu interfaceden türetilerek ilgili tanımlamalar yapılmıştır. Burada ilgili input ve span nesnelerine Jquery vasıtası ile erişilmiş ve cast işlemine gerek duyulmadan“JQuery” tipinde ilgili değişkenlere atanmışlardır. Ve ensonunda da Topla ve Çıkar buttonlarının clicklenme event’ine ilgili operasyonlar tanımlanmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/// <reference path="typings/jquery/jquery.d.ts" /> $(document).ready(function () { var Calc = new Calculator('X', 'Y', 'OutPut'); }); interface IMathOperation { x: JQuery; y: JQuery; wireEvents: () => void; } class Calculator implements IMathOperation { x: JQuery; y: JQuery; output: JQuery; constructor(xId: string, yId: string, outputId: string) { this.x = $('#' + xId); this.y = $('#' + yId); this.output = $('#' + outputId); this.wireEvents(); } wireEvents() { $('#Add').click(event=> { this.output.html(this.add(parseInt(this.x.val()), parseInt(this.y.val())).toString()); }); $('#Subtract').click(event=> { this.output.html(this.subtract(parseInt(this.x.val()), parseInt(this.y.val())).toString()); }); } add(x: number, y: number) { return x + y; } subtract(x: number, y: number) { return x - y; } } |
İlgili Calc.ts’in javascript’e çevrilmiş hali aşağıdaki gibidir:
Bir de birçok defa sorulan Knockout.js ile TypeScript’in nasıl çalıştığı konusunu hep beraber inceleyelim.
Öncelikle aşağıdaki paketler nugetden indirilir: Knockoutjs, Knockout.d.ts ve Knockout.d.ts(Update) paketleri. Knockout.d.ts ile TypeScript’de kullanılacak KnockoutJs’in tanımlanması sağlanmıştır.
Aşağıdaki gibi bir knockout.ts typescript dosyasını projemize ekliyoruz. Öncelikle “ITask” interface oluşturuyoruz. ‘id’,’firstname’,’lastname’,’fullname’,’starts’,’ends’ değişkenleri aşağıda görüldüğü gibi tanımlanmıştır. Dikkat edilmesi gereken nokta tüm değişkenler KnockoutObservable<string> olarak tanımlanmıştır. Ayrıca ‘programLanguage’ ve ‘selectedLanguage’ değişkenleri KnockoutObservableArray<string> olarak tanımlanmıştır. Bu tipler önceden de bahsettiğim kodun en tepesinde referance olarak gösterilen knockout.d.ts‘de tanımlıdır. Daha sonra enum tipinde Job oluşturulmuş ve ilgili meslekler enum olarak atanmıştır. Son olarak TaskDetails sınıfı ITask interface’inden türetilmiş ve ilgili değişkenler constructor’ında atanmıştır. Burada dikkat edilmesi gereken nokta değişkenlere değer ko.observable(title) ile atanmasıdır. “fullname”, “pureComputed()” function’ı ile “firstname” ve “lastname”‘in birleşmesi ile oluşturulur. Son olarak “programLanguage” ve “selectedLanguage” değişkenlerine JSON olarak ilgili değerler atanır.
Knockout.cs:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/// <reference path="typings/knockout/knockout.d.ts" /> interface ITask { id: KnockoutObservable<number>; firstname: KnockoutObservable<string>; lastname: KnockoutObservable<string>; fullname: KnockoutObservable<string>; starts: KnockoutObservable<string>; ends: KnockoutObservable<string>; } enum Job { Programmer, Rider, Gamer }; class TaskDetails implements ITask { id: KnockoutObservable<number>; firstname: KnockoutObservable<string>; lastname: KnockoutObservable<string>; fullname: KnockoutObservable<string>; starts: KnockoutObservable<string>; ends: KnockoutObservable<string>; job: KnockoutObservable<string>; programLanguage: KnockoutObservableArray<string>; selectedLanguage: KnockoutObservableArray<string>; constructor(id: number, title: string, details: string, starts: string, ends: string, job: Job) { this.id = ko.observable(id); this.firstname = ko.observable(title); this.lastname = ko.observable(details); this.fullname = ko.pureComputed({ read: function () { return this.firstname() + " " + this.lastname(); }, owner: this }); this.starts = ko.observable(starts); this.ends = ko.observable(ends); this.job = ko.observable(Job[job]); this.programLanguage = ko.observableArray(['C#', 'Rubby', 'Python', 'Java', 'C++']); this.selectedLanguage = ko.observableArray(['C#', 'Rubby']); } } $(document).ready(function () { ko.applyBindings(new TaskDetails(10, 'Bora', 'Kaşmer', 'Today', 'Tommorrow', Job.Programmer)); }); |
Ön yüzde Index.cshtml aşağıdaki gibi tanımlanmıştır. İlgili ekran görüntüsü aşağıdadır.
Index.cshtml: Ad, Soyad, Tam İsim ilgili değişkenler ile “data-bind” attribute ile ilgili modeldeki propertyler ile bağlanmıştır. Tam isim ad ve soyadın birleşmesinden oluştuğu için ad veya soyad alanı değişince buna bağlı tam isim KnockoutJs “data-bind” özelliği ile otomatik olarak aşağıdaki gif’de de görüldüğü gibi değişmektedir. Meslek tanımlanan “Job enum” değerleriden, Programmer olarak tanımlanmıştır. Programlama dilleri JSON data olarak tanımlı Liste “programLanguage” data-bind=”foreach: programLanguage” şeklinde içinde gezilerek, ilgili span ve checkboxlar doldurulur. Span’ın text’i için data-bind=”text: $data” . Checkbox için ise data-bind=”checkedValue: $data, checked: $parent.selectedLanguage” tanımlanmıştır. Buradaki parent tanımlı root model’i temsil etmektedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/knockout-3.3.0.js"></script> <script src="~/Scripts/knockout.js"></script> <title>Index</title> </head> <body> <div> <table> <tr> <td> Ad: </td> <td> <input type="text" data-bind="textInput: firstname" /> </td> </tr> <tr> <td>Soyad:</td> <td><input type="text" data-bind="textInput: lastname" /></td> </tr> <tr> <td>Tam İsim:</td> <td><input type="text" data-bind="textInput: fullname" /></td> </tr> <tr> <td> Meslek: </td> <td> <input type="text" data-bind="textInput: job" /> </td> </tr> </table> </div> <hr /> <br />Bilinen Programlama Dilleri: <div data-bind="foreach: programLanguage"> <label> <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selectedLanguage" /> <span data-bind="text: $data"></span> </label> </div> </body> </html> |
Yukarıdaki örneklerde type script’de cast’in nasıl yapılacağını ve JQuery tipi ile html elementleri nasıl atama yapacağımızı gördük. AngularJS 2.0 ile TypeScript kullanılabilecek diye o kadar sevindik. Halbuki KnockoutJs ile TypeScript zaten hali hazırda gayet güzel kullanılabiliyor. Yukarıdaki örnekde interfaceden bir class’ı türettik. Constructer’ında ilgili değişkenlere değerleri atadık. Enum tipini kullandık. Bunun yanında nesneleri data-bind ederek KnockoutJs’in gücünden faydalanıp, birinin değişmesi durumunda diğerlerinin nasıl etkilendiğini gördük.
Böylece geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.
Abi elinize saglik. Bir sorum olacakti. Kullanicilarin sepete attigi urunleri databaseye kaydetmek istiyorum ama aradaki baglari yapamiyorum. Bir urun tablosu var bir kullanici tablosu birde sepet tablosu nasıl yapılabilir
Selam Cağrı;
Kabaca şöyle birşey:
tbl_Urun:
Urun_ID int,
İsim varchar(50)
tbl_Kullanici:
ID int,
İsim varchar(50)
tbl_Sepet:
ID int,
KullaniciID int,
UrunID int
ref :(tbl_Urun.ID=tbl_Sepet.UrunID)
ref: (tbl_Kullanici.ID=tbl_Sepet.KullaniciID)
teşekkürler abi
Abi birde empty bir project e asp.net identity tablosu eklenebilirmi?
abi web api 2 ile token based authentication konusunu işlermisin çok zor geliyor.