handlebars şablonlarını harici dosyalara yerleştirme AJAX

Gidon şablonlarını daha kolay yüklemek için herhangi bir yol var mı? Yapabilmek için kolay bir şey gibi görünüyor. Ben index.html için aşağıdaki kodu varsa: İşte handlebars şablonlarını harici dosyalara yerleştirme AJAX

<body> 
    <h1>From the index.html</h1> 
    <div id="hbs"></div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> 
    <script id="test" type="text/x-handlebars-template"> 
     <h2>This is from HBS</h2> 
     <p> 
     hbs generated this p tag! 
     </p> 
    </script> 
    <script src="js/script.js"></script> 
</body>

senaryo js/script.js şablonu derlemek için kod: Bu iyi çalışır

var template = Handlebars.compile(document.querySelector("#test").innerHTML) 
document.querySelector("#hbs").innerHTML = template({})

ama index.html açtığımda görebiliyorum Şablon aracılığıyla oluşturulan başlık ve p etiketi. Bu şablonu ayrı bir dosyaya yazmanın kolay bir yolu olmalı!

template.hbs: Bir hbs dosyasında şablon koyabilirsiniz

kaynak

2016-03-28 Andrew Kim

html almak için

<script type="text/x-handlebars-template"> 
     <h2>This is from HBS</h2> 
     <p> 
     hbs generated this p tag! 
     </p> 
</script>

Ve sonra bir querySelector yerine dosyayı almak için ajax kullanmak

$document.ready(function(){ 
    $.get('/url/template.hbs', function(source) { 
     var template = Handlebars.compile(source); 
     document.querySelector("#hbs").innerHTML = template({}); 
    } 
});

kaynak

2016-03-29 07:03:20

doğru, teşekkürler bu şekilde aşina oldu. Ajax'den yararlanmak zorunda kalmanın kolay olmadığını düşünürdüm. Ama ben bulamadım. Teşekkürler! –

Lütfen sorunun sizin için uygun olduğunu kabul edebilir misiniz? Teşekkürler –

onun sorusuna doğru bir cevap değil, bu bir çözüm, ama sorulan soru değil. AJAX ile söyler –

handlebars şablonlarını harici dosyalara yerleştirme AJAX

cevap

İlgili konular