Handlebars.JS: Front-End Javascript Template Sistemi

handlebarsSon zamanlarda yazılım geliştirirken karşılaşılan problemlere yönelik gelişen yazılım prensipleri ile daha yalın, okunabilir, düzenlenebilir yapılar oluşturmalıyız. Sadece back-end yapıda frameworkler dışında front-end kısmında da çeşitli templating kütüphaneleri geliştirildi. Bunlardan bir tanesi bugünkü yazımın konusu olacak: Handlebars.JS

Bu kütüphaneyi şu sıralar bir API ile veri alışverişi esnasında kullanıyorum. Çok kolay kullanımıyla beni rahatlattı açıkçası. Javascript ile API’a gönderdiğim isteklerden dönen JSON veriyi direkt handlebars.js’de işleyip html kısımda ekrana basıyorum. Her alan tamamen ayrı yerlerde tutulup okunabilirliği artırıyor. Şimdi biraz detaya inelim isterseniz.

Eklentiyi, websitesinden indirip sayfamıza dahil etmek ile başlayalım.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Handlebars.JS - Bilal BARAZ</title>
</head>
<body>
<div id="main">
<script id="entry-template" type="text/x-handlebars-template">
{{yazar}} - {{adres}}
</script>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="handlebars-v1.3.0.js"></script>
<script type="text/javascript" src="engine.js"></script>
</body>
</html>

Buraya kadar herşey güzel. jQuery kullanacağımız için jquery kütüphanesini, handlebars.js kütüphanesini ve işlemlerimizi gerçekleştireceğimiz engine.js dosyamızı html yapımıza dahil ettik. Şimdi ise engine.js içinde verimizi hazırlayıp html yapımıza gönderelim. Yapı çok yabancı gelmeyecektir. Hemen hemen tüm framework’ler aynı mantıkla hareket eder. HTML yapıya göndereceğiniz verileri belli formatlar dahilinde ekliyorsunuz. Genel yapısının çalışma mantığına görsel ile bakalım.

how-handlebars-worksÖrneğin: {{degisken}} şeklinde bildirdiğiniz değişken, aynı isim ile json verimizin içinde de bulunmak zorunda ki eşleşme sağlanıp değiştirme işlemi başarılı şekilde yapılsın.

engine.js dosyamızın içeriğini paylaşayım:


$(document).ready(function() {
var data = {
yazar: 'Bilal BARAZ',
adres: 'http://www.bilalbaraz.com'
};

var yapi = Handlebars.compile($('#entry-template').html());
var onizleme = yapi(data);
//console.log(onizleme);
$("#main").html(onizleme);
});

Burada  yapi adıyla oluşturduğumuz nesnemiz html kısımdaki javascript alanımızın id’siyle içerideki verileri alıyor. Ardından yapi() nesnemizin içine yapi(data) şeklinde gönderdiğimiz verileri işleyip yapının istediğiniz alanına jQuery ile dahil edebilirsiniz. Bu kütüphane ile ilgili başlangıç notumu burada sonlandırıyorum. Daha sonra gerek duyarsam devam ederim. Tüm dökümantasyon resmi sitesinde mevcut. Gayet basit ve açıklayıcı notlar alınmış. İş göreceğine inanıyor ve bu ışığı yakalamakta fayda görüyorum 🙂

Bu yazı Javascript / jQuery, Programlama kategorisine gönderilmiş ve , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir