Wiederladen von Teilstücken Lenker

Question

Ich bin ziemlich neu in der Programmierung und vor allem für den Lenker. Ich habe ein Div mit einer Kombination aus JQuery und Lenker in meiner HTML-Datei geladen. Ich habe Tabs darüber. Ich möchte den gesamten Inhalt neu laden, wenn auf einen Tab geklickt wird. Der Inhalt ist ähnlich (gleiche Struktur), aber Beschriftungen, Bilder usw. müssen sich ändern. Ich habe versucht, die teilweise in lenkern.js zu verwenden. Hier ist ein Beispielcode.

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

Es lädt auch das erste Mal, aber wenn ich auf die Registerkarte klicken, frage ich ihn wieder registerPartial die Registerkarte-content-Teil Skript und es existiert nicht mehr, weil es in HTML-Block rechts geändert hat in meinem Code. Wie kann ich mein Teilskript mit neuem Inhalt wiederverwenden und neu laden?

Vielen Dank!

Answer 1

Die Registerkarte wechseln Teil Ihres Codes fehlt und auch, wie Sie Ihre Daten abrufen, so kann ich Ihnen nur sagen, was Sie an der Stelle tun müssen, wo Sie Ihre Registerkarte wechseln hören.

Um dies zu erreichen Sie müssen nur Ihre #tab-content-partial dafür kompilieren müssen Sie nicht ändern viel: wo Sie

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

Dann wird bei Zeit, um den Inhalt zu ändern, werden Sie nur die Daten übergeben des Inhalts auf die Inhaltsvorlage und ersetzen Sie dann den Inhalt von #tab-content mit dem neuen Ergebnis. Auf diese Weise können Sie auch verschiedene Inhaltsvorlagen erstellen.

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

Ich hoffe, dass Sie suchen, wenn nicht zögern, zu fragen.