Question

我从承包商那里继承了一些使用Handlebars的代码。这基本上是一个html文件和一堆javascript。我应该首先说，我不是HTML / Javascript开发人员。我可以勉强度过难关，但就此而言。

基本上，只有一个Handlebars模板可以创建一个简单的联系表单，并使用

将其放入多个位置

$('.PLACEHOLDER_FAQ-Contact-Form').append( $('#TEMPLATE_FAQ-Contact-Form').html() ).trigger('create');

占位符显示在HTML中的5个位置，上面的每一行都插入了模板。占位符在HTML中如下所示：

<span class="PLACEHOLDER_FAQ-Contact-Form"></span>

这很好用，但问题是我需要修改表单，以便我们可以识别用户使用的网站上的哪个表单。我打算通过在写出来时将参数传递给模板来做到这一点。

我之前从未使用过Handlebars，所以我做到了这一点：

var context = {section : ["concept","solution-outline","design","delivery","close"] };
var emailHTML = $('#TEMPLATE_FAQ-Contact-Form').html();
var emailTemplate = Handlebars.compile(emailHTML);
$('.PLACEHOLDER_FAQ-Contact-Form').append( emailTemplate(context) ).trigger('create');

并修改了模板，以便表单ID如下所示：

<form id ="{{section}}-Form-FAQ" method ="post" enctype ="text/plain" >

上下文有一个数组，其中包含我想要替换的5个值，但目前我得到的结果是

<form id="concept,solution-outline,design,delivery,close-Form-FAQ" method="post" enctype="text/plain">

我想迭代数组，这样每次在HTML中找到占位符时，它会从数组中选择一个项目，然后递增数组索引，以便我得到这个：

<form id="concept-Form-FAQ" method="post" enctype="text/plain">

<form id="solution-outline-Form-FAQ" method="post" enctype="text/plain">

<form id="design-Form-FAQ" method="post" enctype="text/plain">

等等。

任何帮助都会很棒，谢谢

Answer 1

你可以尝试这个（我认为它可能有效：S没有测试它）：

var context = [
    {section : "concept" },
    {section : "solution-outline" },
    {section : "design" },
    {section : "delivery" },
    {section : "close" }
];
//  Set emailHTML
var emailHTML = $('#TEMPLATE_FAQ-Contact-Form').html();
//  Complie Handlebars
var emailTemplate = Handlebars.compile(emailHTML);
//  For each .PLACEHOLDER_FAQ-Contact-Form
$('.PLACEHOLDER_FAQ-Contact-Form').each(function(i){
    //  Append emailTemplate with context[i]
    $(this).append(emailTemplate(context[i])).trigger('create');
});

它使用了把手，但也许你甚至不需要把手来设置ID。

//  Id list
var id = ["concept", "solution-outline", "design", "delivery", "close"]
//  For each .PLACEHOLDER_FAQ-Contact-Form
$('.PLACEHOLDER_FAQ-Contact-Form').each(function(i){
    //  Set emailHTML
    var emailHTML = $('#TEMPLATE_FAQ-Contact-Form').html();
    //  Set emailHTML ID seperatly
    emailHTML.attr('id',id[i])
    //  Append emailHTML
    $(this).append(emailHTML).trigger('create');
});

然而，将正确的ID附加到正确的.PLACEHOLDER_FAQ-联系表格中并不是最好的...

$('.PLACEHOLDER_FAQ-Contact-Form').each

...将遍历页面并在数组中的第一个节点之后命名页面顶部.PLACEHOLDER_FAQ-Contact-Form等等（没有太多控制权）。最好得到.PLACEHOLDER_FAQ-Contact-Form父ID（或喜欢），以便您可以相对于其位置命名（假设父母有一个有用的ID）。

希望有所帮助（和工作）。

将一个Handlebars模板附加到多个占位符

1 个答案: