Backbone View

Backbone View

Merhaba arkadaslar, Backbone yazı dizisine devam ediyoruz. Bugün ki konumuz View olacaktır. Önceki yazılarımda belirttiğim gibi Backbone, MVC yapısında olan bir javascript framework’udur.

MVC’deki Model->Backbone Model ve View da Backbone View olmakta. Dipnot olarak Backbone, Controller kullanmaya zorlamaz.

View; Model veya Collection görüntülendiği kısım diyebiliriz. Modelin yada collection’un nasıl görüneceğini belirler. Bir Backbone view oluşturmak için öncelikle Backbone.View’dan extends etmemiz gerekmekte. Çok karmaşık yapısı olmamakla birlikte el, render, event listening vs gibi birkaç önemli noktası bulunmakta. Bunlara değineceğiz.

İlk olarak bir View tanımı yapalım ve daha sonrasında da model ve template ile nasıl ilişkilendirebiliriz ona bakalım;

Model ve Collection tanımlamalarında olduğu gibi View’in da initialize methodu bulunmaktadır.

View’dan nesne üretmek de yine model ve collectiona benzerdir;

EL property

EL property, her Backbone View’ın sahip olduğu default bir özelliktir. Browser tarafından oluşturulan dom elementine reference olur. Eğer açık olarak tanımlanmamış ise default olarak Backbone el property olarak boş bir div elementi atayacaktır. Bir div element oluşturalım ve el property olarak ayarlayalım;

Loading Template

Backbone View için template tanımı yapılarak EL property’e set edelim. Bunun için underscore.js bize template çözümü sunmakla beraber farklı alternatifler de bulunmakta. Özellikle Handlebar.js tavsiye edebilirim. Template load etmek için initalize kısmında render işlemi yapacağız. Önce bir template oluşturalım;

Yukarıda bir tempalte bulunmakta ve id değeri person_template olarak ayarlanmış, type olarak text/template verdik. Handlebar.js için type’a yazılan değer değişmekte.

İlk olarak view’ın initalize kısmında this reference ile render methodunun çağrıldığına dikkat edelim. render fonksiyonu içerisinde iki aşamala olarak template’ın compile ve load aşamaları bulunur.

Yukardaki satır ile template compile olunur. _(underscore) ifadesi underscore.js’e reference olur ve template methoduna oluşturulan template’in html’i verilir. İkinci parametre olarak data gönderilebilir ama şuan boş gönderdik.

View’ın el’in html içeriği de template değişkeni kullanılarak set edilmekte. Son olarak bir view nesnesi oluşturulur ve EL’nin elementi olarak person_conBlockedner verilir. Tarayıcı üzerinde test edebilirsiniz.

Her Backbone View arka planda bir “model” tutar. View nesnesi oluşturulduğunda model yada collection constructor içinde gönderilebilir. Şöyle ki;

View declarasyonu içerisinde model’in bir Backbone Model yada Backbone Collectionu olduğunu ayarlayabiliriz;

Passing Data

Oluşturulan template compile edilirken kendisine data gönderilebilir. Yukarıdaki template’i şöyle değiştirelim;

Underscore.js’ın sağlamış olduğu bir özelliktir. Template’in compile anında herhangi data, obje vs gönderebiliriz. Compile edelim;

Template compile olurken gönderdiğimiz variable içerisinden mySearch adlı değişkeni  <%= %> etikletleri arasında bulup label etiketi içerisine yerleştirir. <%= %> etiketleri JSP bilenlerin aşina olduğu bir etiket olan expression etikettir. Toplamda 3 etiket bulunmakta;

  • <% %> : Herhangi bir kod çalıştırabilinir.
  • <%= %> : Herhangi birşey çıktıya verilir.
  • <%- %> : Html escape ile birlikte çıktı vermek için kullanılır.

Daha önceki yazılarda underscore.js’in sağladığı each methoduna değinmiştim. Bir örnek yapalım;

underscore.js ile gelen items datasını itere edip person id ve person name bilgisini table üzerinde gösterdik. Compile edelim;

View nesnesi oluştuktan sonra div element içinde table oluşur ve gönderilen item’ler table içerisinde gösterilecektir.

 

View üzerinde gösterilen model yada collectionun değişmesini dinleyebilir, herhangi bir değişiklikte view’ın da kendini güncellemesini sağlayabiliriz. Yine Backbone Model tanımı içerisindekine benzer şekilde initalize kısmında bunu gerçekleştiriyor olacağız;

View üzerinde kullanılan model’de ekleme/değişme/silinme gibi durumlar için view tekrar render edilerek en güncel data gösterilecektir. listenTo methodu ile aksiyonun gerçekleşeceği nesne, aksyion tipi ve aksyion sonucu yapılacak olan işlemleri belirterek dinleyebiliriz. Yukardakilere ek olarak destroy, özel olarak attribute’un değişmesi, sort vs gibi aksiyonları da dinleyebilirsiniz.

View’ı silmek için de view nesnesi üzerinden remove() methodunu çağırmak yeterli olucaktır;

Yazıyı burada sonlandırıyorum arkadaslar.

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

~ Alican Akkus.

 

848 Total Views 2 Views Today