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