Herkese Merhabalar.
Bir hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere knockout.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Bind mekanizması sayesinde otomatik güncelleme yapmamızı sağlayan bu kütüphane, özellikle büyük ve kompleks olan projelerde JavaScript ve HTML kodlarının iç içe geçmesi ile programcının yaşadığı zorluklardan dolayı meydana gelen zaman kaybını önlemekte bize oldukça yardımcı olan bir kütüphanedir. Modelleme mantığıyla tasarım iç içe kullanılmış olduğu için programcının her ikisine de iyi derecede hakim olması zor olabilir. Böyle karışıklıkların yaşanacağı durumlarda knockout.js yardımımıza koşacak. Nasıl olacak dediğinizi duyar gibiyim. Şöyle ki; knockout.js kütüphanesi zengin ve etkileşimli kullanıcı arayüzleri oluşturma imkanı sağlar. Dinamik olarak değişen arayüz elemanları var ise kullanım ve geliştirme kolaylığı ile öne çıkmaktadır. MVVM (Model View ViewModel) dizayn modelini kullanarak geliştirme yapılır. Modeldeki değerler, kullanıcı hareketlerine göre güncellenir. Bu kütüphanenin en etkileyici özelliği veri bağlama yapısıdır. Kütüphaneyi kullanmadan önce, bu siteden indirebilirsiniz.
Bu kütüphane 3 temel özellik üzerine kurulmuştur;
- Şablon kullanımı
- Veri bağlama
- Observable(gözlenebilirlik) ve bağımlılık izlemesi
MVVM(Model View ViewModel):
Bu kütüphanede MVVM dizayn modelini kullanarak geliştirme yapacaksak bu modelin ne olduğunu anlamamız gerekir, haydi neymiş bu MVVM bir bakalım... Model, View ve ViewModel adında 3 yapıdan oluşmaktadır. Amaçları arasında arayüz yapan kişinin arka tarafta nasıl bir iş geliştirildiğini bilmeden işini yapabiliyor olması, daha çabuk genişlemeye müsait bir yapının ortaya çıkarılması sayılabilir. Model, verileri temsil etmektedir. View kullanıcıya sunulan görüntü, ViewModel ise asıl işin geliştirildiği yapıdır. View'ın Model'i bilmesine gerek yoktur. ViewModel aracılık yapmaktadır.
Aşağıdaki kod parçacığında "viewModel1" isimli View Modelimizi oluşturduk. Modeldeki fonksiyon ve diğer ögelerin observable(gözlenebilir) olarak oluşturulmasının nedeni dinamik olarak değiştirilebilme özelliğinin eklenebilmesidir. Ayrıca, modelde belirlemiş olduğumuz fonksiyon, listeye hayvan isimlerini eklememizi sağlayan fonksiyondur.
var viewModel1 = {
kedi: ko.observable(),
array: ko.observableArray(),
hayvanEkle: function () {
this.array.push(this.kedi());
}
};
Aşağıdaki kod parçacığı Knockout'u aktifleştirmemizi sağlar. Peki Knockout modeldeki fonksiyonu nasıl algılıyor? O da elbette Knockout'un applyBindings metoduna viewModel1'i göndermemiz ile gerçekleşiyor.
ko.applyBindings(viewModel1);
Aşağıdaki kod parçacığı, kullanıcı arayüzünde görülen View'umuzdur. Textbox'a girilen değerlerin listeye eklendiği kısımdır.
<ul data-bind="foreach:array">
<li data-bind="text: $data"></li>
</ul>
Aşağıdaki kod parçacığında, textbox içerisine yazılan değerlerin ViewModel içerisinde tanımlanmış kedi ögesinin yerini alması ile güncellenme sağlanır.
<h1 data-bind="text:kedi">Kedi</h1>
<input type="text" data-bind="value:kedi,valueUpdate:'afterkeydown'" />
Proje Kodları:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>KNOCKOUTJS ÖRNEK</title>
</head>
<body>
<h1 style="background-color:azure">KNOCKOUT JAVASCRIPT KÜTÜPHANESİ ÖRNEĞİ :)</h1>
<table>
<tr>
<td style="border: dashed">
<h1 data-bind="text:kedi">Kedi</h1>
<input type="text" data-bind="value:kedi,valueUpdate:'afterkeydown'" />
<input type="submit" data-bind="click: hayvanEkle" />
<ul data-bind="foreach:array">
<li data-bind="text: $data"></li>
</ul>
</td>
</tr>
</table>
<script src="knockout-3.0.0.js"></script>
<script>var viewModel1 = {
kedi: ko.observable(),
array: ko.observableArray(),
hayvanEkle: function () {
this.array.push(this.kedi());
}
};
viewModel1.array.push("kedi");
viewModel1.array.push("köpek");
viewModel1.array.push("tavşan");
ko.applyBindings(viewModel1);
</script>
</body>
</html>
Yazıyı Yazarken Dinamik Olarak Alt Başlık Kısmında Görünürkenki Ekran Görüntüsü:
Gönder Butonuna Bastıktan Sonraki Ekran Görüntüsü:
Umarım anlaşılır ve yararlı bir örnek olmuştur. Bu haftalık anlatacaklarım bu kadar, bir sonraki hafta typeface.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...
KAYNAKLAR
1. http://knockoutjs.com/documentation/observables.html
2. http://www.youtube.com/watch?v=JGwRIbWWqjE&desktop_uri=%2Fwatch%3Fv%3DJGwRIbWWqjE&app=desktop
3. http://www.ercanaydogan.com/post/2012/02/16/Knockoutjs-JavaScript-MVVM-I.aspx
4. http://www.nodejstr.com/2012/08/knockout-js-ve-nodejs-ile-kullanm.html
