Question

我正在尝试使用Handlebars templating engine动态构建并向我的布局添加模板。我通常这样做：

$('#pageTabContent').append('\
            <div class="tab-pane" id="'+ticketId+'">\
                And a whole lot more HTML here..
            </div>');

这很好用，但由于我想使用Handlebars（为了方便起见），我将其更改为：

$.get('/templates/tab_contents.html').then(function(src) {
    var renderedTemplate = Handlebars.compile(src)({ticketId: 99});
    alert(renderedTemplate);
    $('#pageTabContent').append(renderedTemplate);
});

警报显示正确呈现的html，包括ticketId，但它只是拒绝附加到#pageTabContent。在这里，我有点失落。我尝试了各种各样的变体，但我似乎无法将它附加到#pageTabContent div。

有人知道我在这里做错了什么吗？欢迎所有提示！

[编辑] 它试图追加的值以及我在警报中看到的值是：

<div class="tab-pane" id="99">
    This is the content from the separate file!
</div>

Answer 1

试试这个

$.get('/templates/tab_contents.html').then(function(src) {
    var renderedTemplate = Handlebars.compile(src)({ticketId: 99});
    alert(renderedTemplate);
    $('#pageTabContent').append(renderedTemplate.ToString());
});

renderedTemplate可能是字符串以外的另一个对象。可能需要对它进行串联以使其正确追加？

如何将渲染的Handlebars模板加载到div中？

1 个答案: