パーシャルをリロードするハンドルバー

Question

私はプログラミングや特にハンドルバーには全く新しいです。私はjqueryとハンドルバーの組み合わせをHTMLファイルにロードしたdivを持っています。私はそれの上にタブがあります。タブにクリックがあると、すべてのコンテンツを新しいコンテンツにリロードする必要があります。内容は似ていますが（同じ構造）、ラベルや画像などは変更する必要があります。私はhandlebars.jsでpartialを使用しようとしました。 サンプルコードです。

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

これはよく最初の時間をロードしますが、私はタブをクリックしたときに、私は再registerPartialタブのコンテンツ部分のスクリプトに彼に尋ねると、それはHTMLブロックの右に変更されているので、それはもう存在しません。私のコードで。部分的なスクリプトを新しいコンテンツで再利用して再読み込みするにはどうすればよいですか？

ありがとうございました！

Answer 1

コードのタブ切り替え部分がなく、データの取得方法もわかりますので、のタブ切り替えを聞いた場所で行う必要があるのは、です。

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

を次にあなたがコンテンツを変更する必要があるときにあなただけのデータを渡します：あなたはちょうどあなたがはるかに変更する必要はありません。また、このためのあなたの#tab-content-partialをコンパイルする必要があり、これが実現するために

のコンテンツをコンテンツテンプレートにコピーしてから、#tab-contentの内容を新しい結果で置き換えます。 この方法で、さまざまなコンテンツテンプレートを作成することもできます。

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

私はこれがあなたが探している場所であれば願っていますが、お気軽にお尋ねください。