Son videoda biraz karışık bir karmaşa ile ayrıldık. Hepsi tek bir JavaScript bloğunda veri alma, görüntüleme ve iş mantığı ile şablon oluşturmayı birleştiriyorduk. Bu videoda, bizi daha düzenli, sürdürülebilir ve anlaşılır bir kodlama yolunda ilerletmek için bunları parçalara ayırmaya başlayacağız. Bunun büyük bir kısmı şablonlama.
Gidon ile şablon oluşturma maceramızda 1 numara alın. Gidon, şablon için HTML kodunun tam anlamıyla HTML'ye yerleştirilmesi açısından akıllıca bir yaklaşıma sahiptir. Özel bir etiket kullanıyorsunuz. Güzel bir yazım sağlar, çünkü dizgi birleştirme işleminin beceriksizliğinden (tüm bu alıntılar ve artılar) kurtulabilir ve editörünüzün sağladığı HTML için güzel sözdizimi vurgulamasını alabiliriz. Şablonumuz sonuçta şuna benziyordu:
((movieTitle))
((movieDirector))
typeKomut dosyası etiketindeki tuhaf niteliğe dikkat edin. Bu, o etiketin içeriğinin yürütülmesini engeller. Nihayetinde Gidon, bu etiketin cesaretini çıkarır ve onu bir şablon işlevine dönüştürür. Gerçekten başa çıkmanın oldukça akıllıca bir yolu.
Bu gibi ((movieTitle))parçalar önemli kısımlardır. Nihayetinde, oluşturulan şablon oluşturma işlevine bir nesne iletiriz ve bu nesnenin özellikleri bu yer tutucu bitleriyle eşleşir. Gidonlara muhtemelen gidon adı verilmiştir, çünkü bu yer tutucu uçlar yukarıdan biraz gidon gibi görünen kıvrık parantezlere sarılmıştır.
Gidon web sitesindeki basit öğreticinin ardından, şablon oluşturma işlevimizi şu şekilde oluşturuyoruz:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Ardından, fordöngümüzün içinde , tek bir filmi içeren nesne (bağlam) ile yeni şablon oluşturma işlevimizi çağırıyoruz. HTML döndürülecek ve sayfaya ekleyeceğiz.
var html = template(data.movies(i)); $("#movies").append(html);Ayrıca bu videodaki şablonu alıp farklı bir Pen'e filme alıyoruz. Bu sadece kendi kodunuzu gerçek bir projede nasıl parçalayacağınızı gösterir. Şablon neredeyse kesinlikle bir tür "dahil etme" olacaktır.
İşte sona erdiğimiz yer:
CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem mdCjJ'ye bakın
Daha iyi koda doğru burada bazı iyi adımlar attık, ancak onu tamamen temiz hale getirmek için daha çok yolumuz var.