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

【问题标题】：How to load a rendered Handlebars template into a div?如何将渲染的 Handlebars 模板加载到 div 中？
【发布时间】：2014-07-05 00:43:51
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： javascript jquery html handlebars.js template-engine

【解决方案1】：

试试这个

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

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

【讨论】：

我当然也尝试过，但不幸的是这也行不通。因为这确实是更合乎逻辑的尝试，所以我只是编辑了我最初的问题，让它再次相似。您还有其他建议吗？
@kramer65 您可以发布警报中显示的值，以便我可以看到要附加的内容吗？只需添加一个 console.log(renderedTemplate);所以你可以从控制台窗口复制
当然！我将它添加到我最初的问题中。我会说它很简单。有什么想法吗？
@kramer65，你能打破附加并检查渲染模板的类型吗？ $().append 可能将其视为另一个对象，而不是字符串。可能需要 .toString() 吗？
我已经计划在下午给你写一个答案（现在就在这里）。今天我做了一个简单的检查（renderedTemplate === stringTemplate），突然一切正常。我真的不知道为什么以前没有。这可能是某种缓存问题（我以为我排除了），或者这只是我犯的一个非常愚蠢的错误（但我真的不知道我是如何解决的）。所以虽然解决了，但我真的不知道问题出在哪里。但我要感谢你的帮助和精力。像你这样的人让世界变得更美好！ :) 干杯！