Son videoda gidon ile şablonlamayı ele aldık. Ancak Gidon, bloktaki tek şablon çözümü değildir. Bu videoda Alt Çizgi'de bulunan şablonlamayı kullanacağız.
Neden? Bunun bir nedeni, projenizde zaten Alt Çizgi kullanıyor olmanız olabilir. Bu son derece popüler bir kitaplıktır çünkü jQuery gibi, tarayıcılar arası çalışan bir dizi yararlı yöntem sağlar. Söyledikleri gibi:
JQuery'nin smokini ve Backbone.js'nin pantolon askısı ile uyumlu bir kravat.
Zaten Alt Çizgi kullanıyorsanız, şablonunu kullanmak büyük bir teşvik olacaktır.
Ayrıca hızlı testimde, Handlebars 1.0.0 14,2 KB gzip ile sıkıştırılmış ve küçültülmüş ve Alt Çizgi 4,9 KB gzip ile sıkıştırılmış ve küçültülmüştür. Gidon basitçe daha fazla özelliğe sahiptir (örn. Yorum yapma, döngüler, yollar, mantık vb.). Basit demomuzda, bu özelliklere zaten ihtiyacımız yok, bu yüzden tam olarak adil bir karşılaştırma değil, ama ah, biz sadece öğreniyoruz.
Şablonu HTML'de bulundurmak yerine, JavaScript'te Alt Çizgi şablonlarını tanımlamamız gerekir. Bir dizi dizgiye geri döndük.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compileddaha sonra veri nesnesi bağlamımızla çağırabileceğimiz bir işleve dönüşür ve tamamı bu verilerle doldurulmuş HTML'yi döndürür. Verimli olması için, dönen HTML'yi tek bir büyük dizede birleştireceğiz, böylece onu DOM'a yalnızca bir kez ekleyebiliriz:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Bu videoda, verilerin elde edilmesini de soyutladık. Bir JSON kaynağı oluşturduk ve onu elde etmek için jQuery'nin $ .getJSON () işlevini kullandık. Sanki muhtemelen "gerçek hayatta" yapmak zorunda kalacağımız gibi.
$.getJSON("/path/to/json.js", function(data) ( ));For döngümüz ve o verilere dayanan bu tür oradaki geri aramaya gider. Ya da daha büyük olasılıkla, başka bir iyi adlandırılmış işlevi çağırarak, her şeyi temiz bir şekilde ayrı tutarak bunu halletmek için.
İşte sona erdiğimiz yer:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen IpAdn'ı görün
LoDash'ın burada yaptıklarımızla% 100 uyumlu olduğu unutulmamalıdır. LoDash şablonunun Underscore'unkinden daha iyi / daha hızlı / daha yavaş / daha kötü olup olmadığından emin değilim, ancak kitaplıkları değiştirdim ve demo gayet iyi çalıştı.