Используйте тот же объект данных для нескольких шаблонов в Handlebars.js

Question

Я хочу использовать один и тот же объект данных для нескольких шаблонов в разных контекстах, как его можно повторно использовать. В любом случае, частичные части руля были бы полезны в этой ситуации.

$("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» только в виде списка, если кто-то имеет представление об этом!

Answer 1

Чтобы получить второй шаблон, вы должны извлечь его источник HTML из DOM и скомпилировать его в метод шаблона так же, как и для шаблона домашней страницы.

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 для примера.