2017-01-23 7 views
0

異なるコンテキストで複数のテンプレートにわたって同じデータオブジェクトを使用したいのですが、どのように再利用できますか?万一、この状況でハンドルバーパーシャルが役立つでしょう。Handlebars.js内の複数のテンプレートにわたって同じデータオブジェクトを使用する

$("document").ready(function(){ 
var source = $("#homePage-template").html(); 
var template = Handlebars.compile(source); 

var dataPanel = {activites:[ 
    {activity: "Events" , activityRedirect:"#", icon:"fa fa-camera-retro" , imageUrl:"xyz"}, 
    {activity: "Ciriculars" , activityRedirect:"#", icon:"fa fa-paper-plane", imageUrl:"xyz"} 
]}; 
$("#homePage-placeholder").html(template(dataPanel)); 
$("#another-placeholder").html(template(dataPanel)); 
}); 

そして、ここに私のテンプレートです:

<script id="homePage-template" type="text/x-handlebars-template"> 
       <ul> 
        {{#activites}} 
        <li><i class="{{icon}}" aria-hidden="true"></i><a href="{{activityRedirect}}">{{activity}}</a></li> 
        {{/activites}} 
       </ul> 

       </script> 

別のテンプレート

<script id="another-template" type="text/x-handlebars-template"> 
    {{#activites}} 
    <div> 
    <img src="{{imageUrl}}"/> 
    <span>{{activity}}</span> 
    </div> 
    {{/activites}} 
</script> 

今、私は画像とテキストをしたいので、私は、「別のテンプレート」に、このデータを再利用する方法誰かがこれについて考えているなら、それはリストの形でのみ "homePage-template"のようにレンダリングされます!

+0

最初のテンプレートと同じ方法で別のテンプレートで使用します。 – 76484

+0

あなたはそのようなscenerioの例を共有することができますか?@ 76484 – Learner

+0

あなたはオブジェクトを再利用したいと思っています。おそらくあなたはすでにシナリオを持っています。あなたが試したコードを投稿すれば、私はあなたを助けることができます。 – 76484

答えて

2

2番目のテンプレートを取得するには、DOMからHTMLソースを取得して、ホームページのテンプレートと同じようにテンプレートメソッドにコンパイルする必要があります。

var homepage_template_source = $('#homePage-template').html(); 
var another_template_source = $('#another-template').html(); 

var homepage_template = Handlebars.compile(homepage_template_source); 
var another_template = Handlebars.compile(another_template_source); 

あなたがレンダリングしたい特定のテンプレートのテンプレートメソッドを呼び出す必要があります。

$("#homePage-placeholder").html(homepage_template(dataPanel)); 
$("#another-placeholder").html(another_template(dataPanel)); 

は、例えば、このfiddleを参照してください。

+0

ありがとう!このフィドルコードスニペットは本当に役に立ちました。 – Learner

関連する問題