Backbone Collections

Merhaba arkadaşlar, bu yazımda Backbone Collection konusuna değinmeye çalışacağım.

Backbone Collections

Hemen hemen her uygulamada küçük yada büyük ölçekli olsun bir verinin topluca tutulması gerekir. Teknik anlamda bunlara collections diyoruz. Sıralı, itere edilebilen, erişilmek istendiğinde search eden yapılardır. Backbone collection’ları modelleri bir arada tutar. Örn;

  • Model : Student, Collection : ClassStudents
  • Model : Todo Item, Collection : Todo List
  • Model : Animal, Collection : Zoo

Collection oluşturmak Model oluşturmaya oldukça benzerdir. Kendi Collection’unuzu oluşturmak için Backbone.Collection sınıfından extend etmeniz yeterli olucaktır.

İlk Collectionumuzu oluşturalım;

Collection üzerinde model ve url tanımı yaptık şimdilik. Collectionun tutacağı model tanımı ‘model’ attribute bilgisi ile yapılır. ‘url’ ise restful’dan collection çekmek için tanımlanır.

Person nesneleri oluşturup koleksiyona ekleyelim;

Tarayıcı konsolunda size bilgisi olarak 3 değerini göreceğiz.

Collectionu oluşturtukdan sonra add edelim;

Size bilgisi 4 olucaktır.

Model silmek için remove ve collectionu boşaltmak için ise reset methodları bulunmaktadır;

Modelimizi collection üzerinden farklı şekillerde alabiliriz. Bunlar collection üzerindeki index olabilir yada ID veya cid olabilir.

Not : cid , Backbone tarafından oluşturulan bir unique identifier’dır.

Screenshot from 2015-07-15 22:51:26

 

Modelimizi id ve cid değerlerine göre alalım;

Not : Model üzerinde tanımlanan id değeri idAttribute olarak tanımlandığı için her model için unique’dir aynı zamanda. Collection üzerinden id yada cid üzerinden modele erişebiliriz.

Modelimizin collection üzerindeki indexini bulalım;

Screenshot from 2015-07-15 22:56:44

Collectionumuzu itere edelim. Klasik for döngüsü ile de yapabiliriz yada underscore.js ‘in sağladığı each methodunu da kullanabiliriz. Ben ikincisini tavsiye ederim. İkisini de gösterelim;

Çıktı;

Screenshot from 2015-07-15 23:00:00

Underscore.js’in sağlamış olduğu each methodu ile yapalım. Each methodu item, index ve all parametrelerini sağlayarak daha kolay itere etmemizi sağlar. Şöyle ki;

Screenshot from 2015-07-15 23:02:05

 

Collection üzerinde bazı trigger’lar mevcuttur, yani bir olay gerçekleştiğinden haberdar olabiliriz bu sayede. Collection initalize kısmında birkaç tanım yapmamız gerekicek bunun için. Bakalım;

Collection initalize olduğunda this contexti ile collectiona reference olup üzerinde ekleme/silme/değişme gibi olayları dinleyebiliriz.

Çıktıya bakalım;

Screenshot from 2015-07-15 23:09:48

İlk olarak person4 objesi eklendiğinden dolayı 8 id ile eklendi bilgisini gördük. Daha sonra person3’ü sildik ve logu gördük. Burada önemli olan set methodudur. Set methodu ile collection üzerinde model set edebiliriz. Set methodu içerisinde dikkat ederseniz person1 yer almakta ve id 6 olan person2 objesinin ‘name’ alanı değiştirilmiş. Değişimden dolayı Model is changed : 6 logunu görmemiz normal. Ancak Model is remove : 8 kısmı person4 objesinin collection üzerinden silindiğini gösterir. Set methodunda person4 objesine yer vermediğimiz için collection üzerinden silindi.

Collection sorting, koleksiyonumuzu sıralayalım. Bunun için collection tanımı içerisine comparator tanımı yapmamız gerekicek. Name bilgisine göre sıralı biçimde modellerimiz collection üzerinde yer alacaktır;

Ardından collectionu sıralayalım;

Çıktı;

Screenshot from 2015-07-15 23:17:58

Backbone fetch, koleksiyonumuzu restful ile çekelim;

Resftul kaynağına bakalım;

Screenshot from 2015-07-15 23:25:44

Yine underscore.js’in sağladığı fetch methodu ile koleksiyonumuzu aldık. Çıktıya bakalım;

Screenshot from 2015-07-15 23:26:11

Not : Nested collectionlar oluşturabilirsiniz.

Yazımı burada sonlandırmak istiyorum.

Mutlu kalın, kod’la kalın ve bol bol Çay için

~ Alican Akkus

 

1027 Total Views 2 Views Today