Ricaricamento parziali Manubri

Question

Sono abbastanza nuovo alla programmazione e in particolare al manubrio. Ho un div caricato con la combinazione di jquery e manubri nel mio file html. Ho schede su di esso. Voglio ricaricare tutto il contenuto su uno nuovo quando c'è un clic su una scheda. Il contenuto è simile (stessa struttura) ma etichette, immagini e così via devono cambiare. Ho provato ad usare il partial in handlebars.js. Ecco un esempio di codice.

<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> 

Si carica bene la prima volta, ma quando clicco sulla scheda, gli chiedo di ri-registerPartial lo script scheda-content-parziale e non esiste più perché ha cambiato in HTML blocco destra nel mio codice. Come posso riutilizzare e ricaricare il mio script parziale con nuovi contenuti?

Grazie mille!

Answer 1

Manca la parte di commutazione delle schede del codice e anche come si recuperano i dati, quindi posso solo dirti cosa devi fare nel punto in cui ascolti la scheda .

per raggiungere questo obiettivo è sufficiente compilare anche la vostra #tab-content-partial per questo non c'è bisogno di cambiare molto:

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); 

Poi, al momento in cui è necessario modificare il contenuto sarà solo passare i dati del contenuto del modello di contenuto e quindi sostituire il contenuto di #tab-content con il nuovo risultato. In questo modo è anche possibile creare diversi modelli di contenuto.

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

Spero che questo sia ciò che stavi cercando, se non esitate a chiedere.