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分配给具有类target的任何div。尝试按ID分配HTML。这是辅助函数：

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

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

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

对多个数据集使用单个Handlebars多次功能

1 个答案: