Photo by Daniela Turcanu on Unsplash

Backbone.JS ile DOM Kullanımı -2

Bundan önceki yazımda JQuery’ den Backbone nasıl geçileceği ve neden geçme ihtiyacı oluyor konusunda bir yazı yazmıştım. Bu yazıda Backbone üzerinden konuyu örneklerle detaylandırarak anlatmaya çalışacağım.

1. Giriş

Bu yazıyı daha önceden yazmış olduğum DOM API Kullanım Yöntemleri yazı serisinin bir parçası olarak yazıyorum. Bir çok kavramı tek bir yazıda ele almanın yaratacağı karmaşıklıktan kaçmak için bu şekilde bir yönteme başvurdum.

Öncelikle Backbone.js kendi yapısında Underscore.js ve JQuery kullanıyoruz. Ama önceki konularda anlattığım Template Rendering işleminden farklı olarak Backbone.JS Veritabanı ile CRUD işlemleri olan REST servisleri üzerinden UI haberleşen büyük ölçekte Web uygulamaları geliştirmek için tasarlanmıştır.

Backbone.JS ile DOM Kullanımı -1 yazımda Backbone konusuna giriş yapmıştım. Bu yazımda Backbone Web Uygulaması mekanizmasını oluşturan Event, Model, Collection, Router, History, sync ve View kısımlarına örnekler ile daha derinlemesine inceleyeceğiz. Burada sadece View kısmı bizim DOM ile etkileşimi sağlayan kısım. Ama View tanımlayan soyutlamaların(abstraction) nasıl yapıldığını anlatmak için bu konulara bu detayda girerek anlatıyorum.

2. Backbone.Event

Backbone.Event yapısı bir etiket ile bir objenin diğer objeyi dinlemesini sağlayacak ve bu iletişimi yönetecek yapıdır.

En basit olan on,off,once ve trigger metodlarının ne işe yaradıklarını inceleyelim.

Backbone.Event Basic

Burda BlogEvents isimli bir Event nesnesi oluşturduk ve bu Event nesnesine on, once ile callback fonksiyonları ekledik, off ile bu callback çıkardık. Bu durumda

  • Write düğmesine bastıkça AAA birden fazla yazacak
  • Once düğmesine sürekli tıklasak dahi ekrana bir tane CCC yazacak
  • Off düğmesine tıklasak ekrana yazmayacak çünkü unbind etmiştik

Backbone.Model objesinde olan herhangi bir değişikliği dinlemek için listenTo, listenToOnce kullanabilir , dinlemeyi durdurmak için stopListening kullanabilirsiniz.

Model Listener Ekleme

BlogModel oluşturuyoruz. Bu model içerisinde bir özelliği değiştirince oluşturduğumuz Event ile bu modelde yapılan değişikliği dinlemeyi gerçekleştirebilirsiniz.

2. Backbone.Model

Uygulamaların bir çok işlemi model verisi üzerinden gerçekleştirilir. Modelin özelliklerine erişim, doğrulama , bu özelliklerle işlemler yapma vb işlemler, model verisi üzerinden gerçekleştirilir.

  • Ekranda Gösterilecek Veriler
  • Tema, lokalizasyon vb konfigürasyon bilgileri olabilir.

Model veri tutan ve bunu yöneten yapısı ile ileriki konularda bu model verisini nasıl yönetilebileceği konusunda React/Vue/Svelte/Angular gibi kütüphanelerin bu modellerini nasıl yönettiklerini aşağıdaki sırada ayrıca anlatmaya çalışacağım.

  • Component State
  • Context Provider
  • Redux

Ama backbone için Model fonksiyonlarını incelersek

  • veriyi tutacak modeli oluşturmak(extend, constructor, initialize, destroy)
  • property erişimi (set, get, has, clear …)
  • veri güncelleme veya bir yerlere aktarma (sync, toJSON, fetch, save)
  • yardımcı util fonksiyonlar (Underscore Methods) görebilirsiniz.
Backbone Model Methods

Backbone sitesinden aldığım bir örnek ile Model nasıl oluşturulduğunu ve bunları nasıl extend edebildiğimizi göstermeye çalışacağım. Note nesnesi oluşturup bunun prop/methodlarını ve bunları nasıl extend ederek PrivateNote oluşturabileceğimizi görebilirsiniz.

(Örnek https://backbonejs.org/#Model-extend adresinden alınmıştır)

var Note = Backbone.Model.extend({

initialize: function() { ... },
author: function() { ... },
coordinates: function() { ... },
allowedToEdit: function(account) {return true;}
});

var PrivateNote = Note.extend({

allowedToEdit: function(account) {
return account.owns(this);
}

});

Aşağıda basit bir Sidebar UI modelinin nasıl oluşturulduğunu görebilirsiniz.

(Örnek https://backbonejs.org/#Model-extend adresinden alınmıştır)

Backbone Model Yapısı

3. Backbone.Collection

Sıralı Model kümesine yönetmek ve tutmak için kullanılır. Öğrenci Modeli olsun örneğin bu bir öğrencinin verisini tutuyor ama bir okuldaki veya sınıftaki öğrencileri veritabanından alıp arayüzde gösterdiğimizde elimizde Öğrenci listesi, kitap listesi, alışveriş listesi, yapılacak işler listesi olur. Bu Collection yönetmek için;

  • Yeni bir eleman ekleme
  • Eleman silme, güncelleme
  • Tüm elemanların listesini çekme.
Backbone Collection Metodları

4. Backbone.Router

Adından da anlaşılacağı gibi Router yani web uygulamamızın birden fazla sayfası olan bir Single Page Application olduğunu düşünürsek Ana Ekran, Listeleme ekranı, Help ekranı olsun mesela. Bu durumda URL üzerinden bu sayfaların sunucuya gitmeden(sayfaların async ve lazy load olmadığını varsayalım) ilgili sayfanın render edilmesini sağlayacak switch mekanizmasıda diyebiliriz.

Eskiden bu tip işlemler için hashTag # kullanılırdı.

twitter/@username#followers, twitter/@username#likes, vb… HistoryAPI ile birlikte pushState yaparak istenilen uzantıların sunucuya gitmeden Client/Tarayıcı tarafında verilebilme imkanı sağlandı. Backbone hem eski tipteki , hemde HistoryAPI destekleyen tarayıcılarda çalışabilecek şekilde Router mekanizması destekler.

(Örnek https://backbonejs.org/#Router adresinden alınmıştır)

Aşağıdaki örnekte routes kısmında hangi fonksiyonların hangi parametreler ile çağrılacağı yazılır. Altındada URL ilgili bir linkten gidildiği zaman istenen fonksiyonun çağrılarak ilgili sayfanın render edilmesi sağlanır.

var Workspace = Backbone.Router.extend({

routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},

help: function() {
...
},

search: function(query, page) {
...
}

});

Router içerisinde yer alan bazı fonksiyonları inceleyelim. routes, navigate, execute

routes: yeni route yani URL rotaları tanımlayabilmemizi sağlar.

initialize: function(options) {

// Matches #page/10, passing "10"
this.route("page/:number", "page", function(number){ ... });

// Matches /117-a/b/c/open, passing "117-a/b/c" to this.open
this.route(/^(.*?)\/open$/, "open");

},

open: function(id) { ... }

navigate : bir düğmeye veya linke bastığınızda ilgili sayfaya yönlenmek için bu metodu kullanabilirsiniz. Yaptığınız URL değişikliğinin mevcut route çağırıp çağırmayacağını trigger, replace prop değiştirebilirsiniz.

openPage: function(pageNumber) {
this.document.pages.at(pageNumber).open();
this.navigate("page/" + pageNumber);
}

# Or ...

app.navigate("help/troubleshooting", {trigger: true});

# Or ...

app.navigate("help/troubleshooting", {trigger: true, replace: true});

execute : routing çalışma match etme kısmı arasına girip kendi özel fonksiyonlarını yazabilirsiniz. Örneğin aşağıda öncelikle bu kullanıcı login mi şeklinde kontrol edip, kullanıcı login olmamış ise login olma ekranına yönlendirebilirsiniz.

var Router = Backbone.Router.extend({
execute: function(callback, args, name) {
if (!loggedIn) {
goToLogin();
return false;
}
args.push(parseQueryString(args.pop()));
if (callback) callback.apply(this, args);
}
});

5.Backbone.History

Backbone History hashchange dinleyip ele alma veya pushState geçen url uygun route ile eşleştiren(matcher) buna göre gerekli fonksiyonların çağrılmasını sağlar.

Eğer bir landing page ise search engine tarafından indekslenen bir yapıda sayfalar oluşturuyorsanız. Web sunucunuzun users/@odayibasi denilince tüm html yapısını dönmesi mantıklıdır. Ama WebApp yani bir uygulama geliştiriyorsanız burada sayfaların sadece belli kullanıcılar tarafından görülebildiğini düşünürseniz. İlgili View ilgili Content doldurularak oluşturulması mantıklıdır.

Eğer kullanıcı BrowserURL üzerinden değilde Web uygulaması üzerindeki linklerden giderken sunucuya tekrar tekrar gitmeyi engelleyip tarayıcı tarafında bu işleri çözümlemek için #hash veya pushState kullanılır.

start komutu ile Backbone ilgili URL değişikliklerini dinleyip match/eşleşme olduğunda ilgili route aktif edecektir. Bunun öncesinde tüm route oluşturulmuş olması gerekir.

(Örnek https://backbonejs.org/#History adresinden alınmıştır)

$(function(){
new WorkspaceRouter();
new HelpPaneRouter();
Backbone.history.start({pushState: true});
});

6 Backbone.sync

Model ve Collection verisini sunucuya yazmak ve okumak için kullanır. Altyapısında JQuery Ajax jqXHR kullanarak üzerine bir CRUD API’si sağlar.

.sync(method, model, [options])

  • method — CRUD işlemleri (create(POST), read(GET), update(PUT PATCH), or delete(DELETE))
  • model —Model vs Collection
  • options — Ajax request sırasında success, error ve diğer request opsiyonlarına erişip bu durumlarda ekstradan işlemler yapabilirsiniz.

.ajax fonksiyonu sayesinde JQuery diğer AJAX çağrımını kendiniz bir Backbone Modeli kullanmadan da yapabilirsiniz.

.emulateHTTP ve .emulateJSON Eski ve hali hazırda çalışan bir web sunucusu eğer ki REST/HTTP yaklaşımını desteklemiyor ise. Veya sunucu request/response kısmında JSON yerine application/x-www-form-urlencode destekleyecek şekilde çalışmanızı sağlar.

Backbone.emulateHTTP = true;
model.save(); // POST to "/collection/id", with "_method=PUT" + header.
Backbone.emulateJSON = true;
application/json farklı MIME türlerini application/x-www-form-urlencode

9 Backbone.View

Esas geldik DOM yapısı kısmına. Artık Modelimizin Ekrana çizdirildiği kısmı yönetmeye geldi. View içerisinde istenilen JS Template Engine, kullanabilirsiniz. Render içerisinde DOM ile bağlantıyı kuracak ekran çizimi yapacak istediğiniz kütüphaneyi kullanabilirsiniz. (JS, JQuery, Mustache, Handlebars, Underscore, D3.js,

Buradaki View soyutlarken içerisinde initialize içerisinde Model objesinde herhangi bir değişiklik olduğunda bu bileşeni render etme ilişkisi kurulur. Aynen React Prop/State Model yapısını değiştirip render tekrar çağrılması gibi.

events objesi içerisinde ise ekrandaki eventleri dinleyerek ilişkili fonksiyonların tetiklenmesini sağlar.

(Örnek https://backbonejs.org/#View adresinden alınmıştır)

var DocumentRow = Backbone.View.extend({

tagName: "li",

className: "document-row",

events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
},

initialize: function() {
this.listenTo(this.model, "change", this.render);
},

render: function() {
...
}

});

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store