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