2013-07-01 33 views
5

Programlamada ve özellikle de gidonlarda oldukça yeniyim. Benim html dosyasında jquery ve gidon kombinasyonu ile yüklü bir div var. Üstünde sekmeler var. Bir sekmede bir tıklama olduğunda, tüm içeriği yeni bir tanesine yeniden yüklemek istiyorum. İçerik benzerdir (aynı yapı) ancak etiketler, resimler ve benzeri değişmek zorundadır. Ben handlebars.js kısmi kullanmayı denedim. İşte örnek bir kod.Bölümleri yeniden yükleme Gidonlar

<script type="text/x-handlebars-template" id="all-handlebar"> 
    {{#each tabs}} 
     <div id=tab{{@index}}>{{this.text}}</div> 
    {{/each}} 
    <div id="tab-content">{{> tabContentPartial}} 
</script> 
<script type="text/x-handlebars-template" id="tab-content-partial"> 
    <div id="mycontent"> 
     <div id="text">{{mycontent.text}}</div> 
     <div id="text">{{mycontent.image}}</div> 
    </div>  
</script> 
<script type="text/javascript"> 
    source=$("#all-handlebar").html(); 
    var template = Handlebars.compile(source); 
    Handlebars.registerPartial("tabContentPartial", $("#tab-content-partial").html()) 
    var context = { 
     mycontent : { 
      text="something that has to change everytime I click on a different tab", 
      image="idem" 
    }; 
    var html = template(context); 
    $("body").html(html); 
</script> 

Iyi ilk kez yükleyen ama sekmesine tıklayın, ben sekme içerik kısmi senaryoyu-registerPartial yeniden ona sormak ve HTML blok sağa değişti çünkü artık yok benim kodumda Kısmi komutumu yeni içerikle nasıl yeniden kullanabilir ve yeniden yükleyebilirim?

Çok teşekkür ederim!

+1

Bazı ilgili kodları sağlamanız yararlı olur. Normalde, gidon şablonunuzu derlemenizi geçer. Sonra verilerinizi iletirsiniz ve sayfanıza eklediğiniz oluşturduğunuz html'yi döndürür. Bu derlenmiş şablon farklı verilerle yeniden kullanabilirsiniz. –

+0

Şimdi daha net mi? Gecikme için özür dilerim, farklı çözümlere bakmaya çalıştım. –

cevap

4

Kodunuzun bölüm değiştirme bölümü eksiktir ve ayrıca verilerinizi nasıl aldığınızla ilgili bilgi verir, böylece anahtarını tablonuzu dinlediğiniz yerde yalnızca size ne yapmanız gerektiğini söylerim. Sonra

var source=$("#all-handlebar").html(); 
var contentSrc=$("#tab-content-partial").html(); 
var template = Handlebars.compile(source); 
var contentTemplate = Handlebars.compile(contentSrc); 

//because you already have a compiled version of your content template now you can pass this as partial 
Handlebars.registerPartial("tabContentPartial", contentTemplate); 
var context = { 
    mycontent : { 
     text : "something that has to change everytime I click on a different tab", 
     image : "idem" 
    } 
}; 

var html = template(context); 
$("body").html(html); 

size sadece veri geçecek içeriğini değiştirmek gerekir anda:

çok daha değiştirmek gerekmez, sadece, aynı zamanda bunun için #tab-content-partial derlemek için gereken Bunu başarmak için içeriği içerik şablonuna ve ardından #tab-content içeriğini yeni sonuçla değiştirin. Bu şekilde farklı içerik şablonları da oluşturabilirsiniz.

//replace the content with the result of the template 
$("#tab-content").html(contentTemplate(newContent)); 

Umarım sormaktan çekinmeyin, nerede aradığınız budur.

+0

Tam olarak aradığım şey bu! Çok teşekkür ederim, sorunumu çözdü. –

+1

Lütfen bunun için keman sağlayabilir misiniz? – pravid