Question

因此，我正在尝试从外部文件渲染模板，并且在渲染模板时它“起作用”，只是它将脚本而不是实际脚本内容发送给目标。

我尝试使用jquery .html（）函数来获取脚本的内部内容，但我得到的只是“未定义”

这是正文内容：

<div id="target"></div>

    <script>
        var context = {"name": "Test"};
        $.get('template.handlebars', function (data) {
                var templateScript = Handlebars.compile(data);
                var html = templateScript(context);

                $(document.body).append(html);
        }, 'html')
    </script>

我得到的是这样：

<div id="target"></div>
<script>blah blah blah</script>
<script type="text/x-handlebars-template" id="template">
    <h1>Test</h1>
</script>

代替

<div id="target">
    <h1>Test</h1>
</div>

针对某人的问题：用“ body”代替document.body具有相同的效果。模板文档的内容为：

<script type="text/x-handlebars-template" id="template">
    <h1>{{ name }}</h1>
</script>

Answer 1

在您的方案中，您将把手模板放在一个单独的文件中–该文件不是HTML文件，因此应尝试删除脚本标签。根据把手文档，他们希望您包括用于屏蔽HTML解析器的脚本标签，但是在您的情况下，这应该不是问题。

接下来，您的jQuery $(document.body).append(html);将选择文档正文并附加生成的HTML代码段。

要实现：

<div id="target">
      <h1>Test</h1>
</div>

您必须选择target div。进行$("#target").html(html);应该可以解决该问题。

我已经创建了一个样本来模拟您的情况，希望这能提供更多见解。

HTML文件内容：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
    </head>
    <body>
        <div id="target"></div>

        <script>
            var context = { name: "Test" };
            $.get(
                "template.handlebars",
                function(data) {
                    var templateScript = Handlebars.compile(data);
                    var html = templateScript(context);

                    // $(document.body).append(html);
                    $("#target").html(html);
                },
                "html"
            );
        </script>
    </body>
</html>

车把模板文件内容：

template.handlebars

<h1>{{ name }}</h1>

参考

https://handlebarsjs.com/

车把编译成脚本而不是车身

1 个答案: