異なるコンテキストで複数のテンプレートにわたって同じデータオブジェクトを使用したいのですが、どのように再利用できますか?万一、この状況でハンドルバーパーシャルが役立つでしょう。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"のようにレンダリングされます!
最初のテンプレートと同じ方法で別のテンプレートで使用します。 – 76484
あなたはそのようなscenerioの例を共有することができますか?@ 76484 – Learner
あなたはオブジェクトを再利用したいと思っています。おそらくあなたはすでにシナリオを持っています。あなたが試したコードを投稿すれば、私はあなたを助けることができます。 – 76484