对多个数据集多次使用单个 Handlebars 函数

Question

有没有办法多次重复使用单个 Handlebars 函数，每次为它提供不同的数据？

我有两个 div 作为以下代码的按钮

<div id="#btn-A" data-one="data-A1" data-two="data-A2" onclick="magicHappensHere(this)">
<div id="#btn-B" data-one="data-B1" data-two="data-B2" onclick="magicHappensHere(this)">

和两个函数

function magicHappensHere(data) {
    //some code
    var selection = $('#selection');
    selection.append('<div id="target-" + data.one + '" class="target"></div>'
    buildTemplate(data);
    //some more code
}

并且有实际的模板调用

function buildTemplate(data) {
    try {
        var source = $('#source').html();
        var template = Handlebars.compile(source);
        var html = template(data);
        $('.target').html(html);
    } catch(err) {

    }
}

并且在特定时刻它工作正常。我可以添加两个目标 div，它们有不同的 ID，到现在为止一切都很顺利。问题是，即使结果我有目标 A 和目标 B，两者中显示的数据都是来自目标 B 的数据。我几乎可以肯定我的 buildTemplate 函数有问题，我应该去那里看看。我想的是 data 正在覆盖自己，它不应该。各位好心人能告诉我如何避免这种情况吗？

Answer 1

在您的 buildTemplate 函数中，您将结果 HTML 分配给具有 class target 的任何 div。尝试按 ID 分配 HTML。这是一个辅助函数：

function renderData(template, data, selector) {
    var html = template(data);
    $(selector).html(html);
}

现在我们可以轻松地将数据呈现给不同的元素（我假设我们已经构建了 handlebars 模板）：

renderData(template, data1, '#first-target');
renderData(template, data2, '#second-target');

对多个数据集多次使用单个 Handlebars 函数

Using single Handlebars function multiple times for multiple data sets

javascript

jquery

handlebars.js