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

时间:2016-03-18 15:32:56

标签: javascript jquery handlebars.js

有没有办法多次重复使用单个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覆盖了自己而且不应该。善良的人能告诉我,你们中的任何人都可以避免这种情况吗?

1 个答案:

答案 0 :(得分: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');