Şablon, sayfaya enjekte etmeniz gereken bir HTML öbeğidir. Genellikle şablonlar "sunucu tarafında" oluşturulur - tam olarak oluşturulmuş JavaScript'e gelirler ve sadece DOM'a yerleştirilmeleri gerekir. Ancak bazen bu mümkün değildir veya sunucuya fazladan gidiş-dönüş gerektirir ve bu da yavaş olabilir. Bu durumda şablonun doğru JavaScript'te olması idealdir. İhtiyacınız olan şablonu elde edene kadar, HTML ve veri bitlerini bir araya getirerek, kesinlikle sadece biraz dize birleştirme yapabilirsiniz. Ancak bu, veri ve şablonla ilgili endişeleri birbirinden ayırmadığı için muhtemelen ideal değildir. Gerçek JavaScript şablonu burada yardımcı olabilir.
Bu ekran video kaydında JavaScript şablonunun temel "nedenini" ele alacağız ve ardından Underscore.js'de nasıl yapıldığına dair basit bir örneği özellikle ele alacağız. Sonra diğer bazı alternatifleri ele alacağız.
Demo
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen% = penName%> bölümüne bakın
Bağlantılar
- CodePen'de Temel Demo
- Underscore.js Şablonu
- NetTuts: JavaScript Şablonlarıyla Çalışırken En İyi Uygulamalar
- MDN: JavaScript şablonları
- John Resig: JavaScript Mikro Şablon Oluşturma
- James Padolsey: Doğrudan yorumlama