Photo by Peter Scholten on Unsplash

DOM API USAGE SERIES

Template Rendering-2(Handlebars.JS)

JS ve JQuery ile DOM içerisine yeni sub HTML yapıları oluşturmak oldukça zor bir işlem bunun yerine bazı hazır kütüphaneler sizin bu işlemleri hem daha basit hem de daha hızlı yapmanızı sağlıyor. Bu yazıda Template Rendering konusunda bahsedeceğim.

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.

Bir öncelik yazımda Mustache.JS yani logic-less template bahsetmiştim. Bu template işlerinde bazen düşündüğümüzden daha karmaşık yapılara arayüz oluşturma ihtiyacı oluşuyor. (condition, if/else vb işler zor). Birde veriniz sunucunda geliyor ve bu yapıya uygun değil ise sizin bu veri yapısının içerisine kendi değişkenlerinizi eklemeniz gerekir veya kendi ara veri yapılarınızı oluşturmanız gerekli.

Bunun yerine Template üzerine daha fazla business mantığı işletebileceğimiz bir kütüphane olsa biz Model verisi yerini bu logic/mantıkları template kodu içerisinde gerçekleştirebiliriz. Handlebar.JS

HandleBar.JS

Semantic Templates: Daha akıllı template hazırlamayı sağlayarak veri yapısında değişiklik yapmadan (condition if/else , loop vs) template içerisinde tanımlayabilme

Mustache-Compatible: Daha önceden Mustache kullanan kod yapıların bozulmadan Handlebars.JS ile kullanabilmelerini sağlar.

Fast Execution: Template JS fonksiyonları olarak tutar bu sayede view oluşturma işlemini hızlandırır.

Önceki kodumuzda Mustache.JS yazdığımız örneği Handlebars.JS çalışabilir mi denemesi yaptım. Ve sorun olmadan çalıştı.

Mustache.JS ve Handlebars.JS

Bu kütüphanede Handlebars.compile(theTemplate) kodu ekstradan geliyor. Yaptığı template fonksiyon olarak derleyerek daha sonradan daha hızlı view oluşturmasını sağlamak. Yukarıdaki resimden Mustache-Compatible ve Fast Execution için farklılıkları görebilirsiniz. Ben bu yazıda daha çok Semantic Templates neleri kapsadığı üzerinde duracağım.

1. Semantic Templates

Bu kısımda Simple Expression, Nested Object kısmı Mustache.JS ile aynı mekanizmada çalışıyor.

1.1 Evaluation Context

#with ilgili obje içerisinde #each ilgili array içerisinde context değiştirmeye olanak sağlar. Bir sonraki örnekte Custom Helper bu context nasıl değiştirilebileceğini anlatacağım.

1.2 Custom Helper

Örneğin iki tane fonksiyon yazalım birisi yazıları büyük harfa diğeride küçük harfe dönüştürsün . Bunun için HandleBars.registerHelper fonksiyonunu kullanıyoruz. Template içerisinde yardımcı fonksiyonları kullanabiliyoruz. Bu bize büyük bir esneklik sağlıyor.

Evaluation Context #with #each this kullanımı

Sonuç

1.2 Block Helper

Kendi block yapılarımızı oluşturabilmemiz için yani # ile başlayan / biten yapılar oluşturmamız izin verir. Örneğin bir liste yapısı oluşturmak istersek aşağıdaki resimdeki gibi kendi block yapımızı Helper ekleriz ve bunu template içerisinde kullanabiliriz.

list Block Helper

Sonuç

1.3 Built-in Helpers

Hazır bir takım helper bulunuyor. Ama sizin kendi helper oluşturabilmeniz içinde bir altyapı bulunuyor. Bu da size büyük bir esneklik sağlıyor. Hazır helper örnek;

if /else yapıları kurabilirsiniz

{{#if person}} 
 <span>{this}}</span> 
{{else}} 
 <span>No user</span> 
{{/if}}

#unless : not if yapısını kullanabilirsiniz veya kendimiz not diye yukarıda tanımladığımız gibi bir helper tanımlayıp {{#if not person}} şeklinde kullanabilirsiniz

#each, #with: array elemanlarına dönerek veya obj bağlamına erişimi sağlar. Bu konuyu yukarda anlattığım için tekrar anlatmıyorum.

#lookup: elinizdeki 2 tane veri yapısı olsun birincisi mevcut array , diğer veri yapısında da bu bir objMap veya Array olabilir. Birinci array içerisindeki veriler ile bu ikinci yapılar birbirine bağlantılı. Nasıl bir template yapısı oluşturalım ki. Birinci veri yapısı üzerinde gezip template oluştururken paralelde 2nci veri yapısından sorgulama yapıp ilgili veriye ulaşıp bunu template içerisine koysun. Bunu lookup fonksiyonu ile gerçekleştirebiliriz.

Aşağıdaki ilk örnek birbirine bağlı Array-Array yapısı için lookup kullanımını anlatıyor. Bu örnek Handlebars.JS sayfasından alınmıştır.

template:{{#each people}}
 {{.}} lives in {{lookup ../cities @index}}
{{/each}}
model:{
  people: ["Nils", "Yehuda"],
  cities: ["Darmstadt", "San Francisco"]
}

Bu örnekte Array-Obj yapısı için lookup kullanımını anlatıyor. Bu örnek Handlebars.JS sayfasından alınmıştır.

template:{{#each persons as | person |}}
    {{name}} lives in {{#with (lookup ../cities [resident-in])~}}
      {{name}} ({{country}})
    {{/with}}
{{/each}}
model: {
  persons: [
    {
      name: "Nils",
      "resident-in": "darmstadt"
    },
    {
      name: "Yehuda",
      "resident-in": "san-francisco"
    }
  ],
  cities: {
    darmstadt: {
      name: "Darmstadt",
      country: "Germany"
    },
    "san-francisco": {
      name: "San Francisco",
      country: "USA"
    }
  }
}

#log dev console log yazdırabilmenize olanak sağlar. Kendi Helper geliştirirken oldukça faydalı bir özellik

{{log 'firstname' firstname}}

1.4 Diğer Özellikleri

HTML Escaping, Partials içerisinde bir çok kendimizin Semantic Template tanımlamasına izin verecek bunları parametrik ve esnek kullandırabilecek altyapıların hazır olduğunu görebilirsiniz

• Dynamic Partials
• Partial Context
• Partial Parameters
• Partial Blocks
• Inline Partials

DOM API Usage ile ilgili örnek Kodlar

2. Yorum

Bu Template Engine sizin veri yapınızı değiştirmeden Akıllı Template oluşturarak View Rendering işlemindeki tüm arayüz mantıklarını bu template içerisine Helper yapabilme imkanı sunar. Elimizde artık çok çok daha güçlü bir template engine var.

Okumaya Devam Et 😃

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