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>

现在我如何将这些数据重新用于另一个模板＆＃34;，因为我想要一个图像和文本，但它呈现的类似于＆＃34; homePage-template＆＃34;只有列表的形式，如果有人对此有所了解！

Answer 1

为了拥有第二个模板，您必须从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。

在Handlebars.js

1 个答案: