6

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

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

最初はうまくロードされますが、タブをクリックすると、tab-content-partial スクリプトを部分的に再登録するように依頼しましたが、コード内で HTML ブロックに変更されたため、もう存在しません。部分的なスクリプトを新しいコンテンツで再利用してリロードするにはどうすればよいですか?

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

4

1 に答える 1

6

コードのタブ切り替え部分とデータの取得方法が欠落しているため、タブ切り替えを聞く場所で何をする必要があるかしかわかりません。

これを達成するには、これをコンパイルするだけで#tab-content-partialよく、あまり変更する必要はありません:

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に渡し、そのコンテンツを新しい結果に置き換えます。このようにして、さまざまなコンテンツ テンプレートを作成することもできます。

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

これがあなたが探しているものであることを願っています。

于 2013-07-02T15:23:42.693 に答える