[Knockout.js] Jsfiddle ile knockout kullanımı

Tüm dünyanın client bazlı frameworkleri test etmek, birbirleri ile paylaşmak veya yeni şeyler denemek için kullandığı yegane sitelerden birisidir jsfiddle.net. Bende javascript frameworklerinden biri olan knockout’u canlı olarak test edebilmeniz için jsfiddle üzerinde nasıl knockout kullanılır onu göstereceğim.

Framework & Extensions bölümü : Bu bölümde kullanmak istediğiniz bir framework’ü ister seçerek ekleyebilirsiniz, ister external resources bölümünden url vererek doğrudan kullanabilirsiniz.

Html,javascript,css,result bölümü : Bu bölüm yazmak istediğiniz uygulamanın parçasının olduğu kısımdır. Html bölümüne kullanacağınız html nesnelerini ekleyebilirsiniz. Javascript kısmında kullanmak istediğiniz framework dahil olmak üzere bütün scriptinizi yazabilirsiniz. Css kısmında ise htmlinize biraz şekil vermek için style’lar ekleyebilirisiniz.

Navigation bölümü : Navigation panelde aşağıdaki butonlar var, update butonu şimdilik işimizi görecek. Update butonu ile yazdığımız kodu çalıştırıp sonucu da result panelinde görebiliriz.

 

Şimdi gelelim knockout.js’i eklemeye ve ilk viewModel’imizi oluşturmaya.

– Framework & Extension bölümüde No-library default olarak seçili olan dropdownda çalışmak istediğiniz knockout framework verisyonunu seçmelisiniz. Biz knockout 3 versiyonunu seçeceğiz. OnLoad seçeneğini de body içine kod yazıyormuşuz gibi değiştireceğiz.

Bunları da ekledikten sonra artık kod yazmaya geçebiliriz. Aşağıdaki şekilde kodlarımızı ekleyip çalıştırdığımızda klişelerden biri olarak “merhaba knockout.js” yazdıracağız.

Benim için ekran görüntüsü aşağıdaki şekilde :

Ctrl+S ile veya update yaparak uygulamanızı çalıştırabilirsiniz. Yukarıdaki frame’de result panelinde de görebilirsiniz.

Bu makale buraya kadar, takıldığınız kısımları çekinmeden sorabilirsiniz.
İyi günler,

[Knockout.js] Gözlemciler (Observables)

KnockoutJS aşağıdaki üç özellik üzerine kurulmuştur :

– Gözlemleme ve bağımlılık izleme,
– Bildirime dayanan bağlama
– Şablon oluşturma

Bu yazıda üç özelliğe değinilecektir. Ama öncesinde MVVM tasarım desenine ve view model mantığına değinelim.

Model-View-View Model (MVVM) kullanıcı ara yüzü geliştirmek için kullanılan bir tasarım desenidir. Ne kadar karmaşık olursa olsun, bir kullanıcı arayüzünü en basite indirgemek için üç parçaya ayırır.

1- Model : Server tarafından hesaplanan verinin ajax çağrı ile JSON objesi olarak alınması, modeli oluşturur. Yani kısaca saf verinin kendisidir.
2- View Model : Model ile View arasındaki iş kurallarının gerçekleştiği kısımdır. Model’den gelen datayı işleyerek kullanıcıya önyüz’ün nasıl gösterilmesi gerektiğini hesaplar.
Not : UI’ın kendisi değildir. Bu katmanda hiçbir input alanı olmaz.
3- View : Kullanıcının gördüğü kısımdır. View Model’de oluşturulmuş bilgileri görüntüler. View model’e komutlar göndererek önyüz’ün etkileşimli olmasını sağlar.
Knockout kullanıyorsanız eğer view’iniz html’in kendisidir.

Basit bir knockout modeli oluşturmak için aşağıdaki javascript objesini kullanabilirsiniz.

	var myViewModel = {
	    isim : 'Serkan',
	    yas : 26
	};

Çok basit bir view oluşturarak model’deki bilgileri görüntüleyebilirsiniz. Örneğin aşağıdaki html “Benim adım Serkan” yazacaktır.

	Benim adım <span data-bind="text: isim "></span>

Knokcout’un aktifleştirilmesi

Data-bind özelliği Html’e ait bir özellik değildir. Bunu tanıyabilmesi için aşağıdaki scriptin yazılması gerekmektedir. Böylece KO gerekli tanımlamaları yapacaktır.

	ko.applyBindings(myViewModel);

ApplyBindings metodu 2 parametre alır :

– İlki ve zorunlu olan bu parametre viewModel’in kendisidir.
– İkinci parametre ise html’in sadece belirli bir bölümüne tanım yapılmak isteniyorsa, istenilen kısmın kendisi parametre geçilir. Örn :
• ko.applyBindings(myViewModel, document.getElementById(‘someElementId’))

Buraya kadar olan kodlar aşağıdaki gibidir :

	<html>
	        <head>
	                <script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
	        </head>
	        <body>
	                <div>   
	                        Benim adım <span data-bind='text: isim'> </span> 
	                </div>
	                <script>
	                var myViewModel  = function(first, last) {
	                        this.isim = 'Serkan';
	                        this.yas = '26';
	                };
	                ko.applyBindings(myViewModel);
	                </script>
	        </body>
	</html>

Aslında bu kadar basit.

Observable

Şimdiye kadar yaptıklarımız ile basit bir viewModel nasıl oluşturulur, binding nasıl yapılır görmüş olduk. Ama knockout’un en temel özelliklerinden biri de etkileşimli bir arayüz sunmasıdır. Peki bunu nasıl sağlayacağız ?

Cevap : Modelimizi observable olarak tanımlayacağız. Observable, gözlemci demektir. Modelimizdeki bir değişkeni observable olarak tanımladığımızda, o değiken değiştiğinde bağlı olduğu yerler güncellenecektir.

	var myViewModel  = function(first, last) {
	        this.isim = ko.observable('Serkan');
	        this.yas =  ko.observable(26);
	};
	

Projemizin son hali :

	<html>
	        <head>
	                <script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
	        </head>
	        <body>
	                <input type="text" data-bind="value: isim" />
	                <div>   
	                        Benim adım <span data-bind='text: isim'> </span> 
	                </div>
	                <script>
	                var myViewModel  = function(first, last) {
	                        this.isim = ko.observable('Serkan');
	                        this.yas =  ko.observable(26);
	                };
	                ko.applyBindings(myViewModel);
	                </script>
	        </body>
	</html>
	

Gördüğünüz gibi textbox’ın hem ilk değerini atamış olduk hem de textbox’daki değer değiştiğinde label’ı da değiştirmiş olduk.

Observable nesnelerde okuma ve yazma

Javascript’in getter, setter özelliğini tüm browserlar desteklemediği için tüm değer atama ve getirmeler metodlar halinde yapılmaktadır.

– Observable bir nesnenin şu anki değerini okumak için nesneyi parametresi bir metod gibi çağırmak yeterlidir. Örn : myViewModel.isim() ‘Serkan’ değerini, myViewModel.yas() 26 değerini dönecektir.
– Observable bir nesneye değer atamak için bir parametre geçecek şekilde metod çağrısı yapmak yeterlidir. Örn : myViewModel.isim(‘Mehmet’) ismi ‘Mehmet’ , myViewModel.yas(55) yaşı 55 yapacaktır.

Kaynak : http://knockoutjs.com/documentation/observables.html

[Knockout.js] İndirme ve Kurulum

http://knockoutjs.com/downloads/knockout-3.3.0.debug.js adresinden kopyala yapıştır ile indirebilir veya referans vererek kullanabilirsiniz. Ayrıca diğer indirme yöntemleri için : http://knockoutjs.com/downloads/index.html adresinden destek alabilirsiniz.

Aşağıdaki script tag’ını html’in header’ına eklediğinizde kullanmaya başlayabilirsiniz.

Kaynak : http://knockoutjs.com/downloads/index.html

[Knockout.js] Giriş

Knockout js bir javascript kütüphanesidir. Kullanıcı ara yüzünde zengin ve birbiri ile etkileşimli (bir girdi alanı değiştiğinde diğer alanların otomatik olarak değişen alana göre kendini hesaplayıp değiştirmesi) bir ara yüz geliştirmenize olanak verir.

Öne çıkan özellikler :

– Zarif bağımlılık izleme : Veri modeliniz her değiştiğinde kullanıcı ara yüzünün doğru kısmını güncelleyebilirsiniz.
– Bildirime dayanan bağlama : Karmaşık kullanıcı ara yüzünüzü oluşturacağınız basit ve etkili modeliniz ile kolaylıkla bağlayabilirsiniz.
– Genişleye bilirlik : Birkaç satır kod ile yazdığınız modelinizi genişletebilir, ek özellikler sağlayabilirsiniz.

Ek Özellikler :

– Saf javascript kütüphanesi olması sayesinde istediğiniz browserda istediğiniz an kullanmaya başlaya biliriniz.
– Var olan projenize köklü bir değişiklik yapmaksınız entegre edebilirsiniz.
– Gzip ile sıkıştırılmış hali 13 kb’tır. Network’ ü yormaz.
– Birçok tarayıcıyı destekler (IE 6+, Firefox 2+, Chrome, Safari, diğerleri)
– Yeni tarayıcı ve yeni platformlara adaptedir.

Kaynak : http://knockoutjs.com/documentation/introduction.html