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

Using single Handlebars function multiple times for multiple data sets

本文关键字：单个 功能 数据集      更新时间：2023-09-26

有没有办法多次重用单个车把功能，每次都给它提供不同的数据？

我有两个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正在覆盖自己，它不应该。你们中的任何人，好人，能告诉我，如何避免这种情况吗？

在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');
相关文章：