在 Ajax 和 Jquery 中使用 Handlebars答案

【问题标题】：Use Handlebars with Ajax and Jquery在 Ajax 和 Jquery 中使用 Handlebars
【发布时间】：2018-09-11 07:53:06
【问题描述】：

我正在学习使用把手，我想在 AJAX 调用中使用它，根据我的想法，一旦我从服务器获取数据，我就使用把手进行编译，然后在特定的 div 中打印，但它会抛出我一个错误。我的语法会错吗？

<div id="get_art">
</div>

<script id="artists-template" type="text/x-handlebars-template">
    <ul class="artist">
    {{#each this}}
        <li class="i"><a class="i" href="{{url}}"><img alt="{{name}}" src="{{image}}"><span> ""</span></a></li>
    {{/each}}
    </ul>
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $temporal . "/assets/js/main.js" ?> "></script>

这是我的js：

jQuery(function($){
    $(document).ready(function() {
        $.ajax({
            type : 'POST',
            url  : 'http://localhost/test/api.php',
            data : 'endpoint=yahoo&results=2&wip=normal',
            dataType : 'json',
            beforeSend: function(){
                $('#get_art').html('<img src="'+baseUrl+'/assets/img/loading.svg" />');
            }
        }).done(function(data) {
            $('#get_art').html('');
            var artistsTemplateSource = document.getElementById('artists-template');
            var artistsTemplate = Handlebars.compile(artistsTemplateSource);
            var $artists = $('#get_art');
            $artists.html(artistsTemplate(data));
        });
    });
});

我收到此错误：

Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed [object HTMLScriptElement]

【问题讨论】：

好吧，我不知道把手，但错误应该是不言自明的，你正在传递脚本标签，document.getElementById('artists-template'); 会给你.compile()。我能告诉你的就是再次阅读该方法的文档或仔细检查你认为你传递的内容
同意斯卡拉穆什。您传递的是 html element，而不是内容。如果它像小胡子，它会类似于 `var artistTemplateSource = document.getElementById('artists-template').innerHTML;。检查文档。
试试artistsTemplate(data).outerHTML ?

标签： jquery json ajax post handlebars.js

【解决方案1】：

问题在于，您使用的是 HTML 元素本身，而不是使用简单的文本作为模板传递。要获取文档的文本，您可以使用 JQuery 的 .html 方法。

而不是这个

var artistsTemplateSource = document.getElementById('artists-template');

使用这个

var artistsTemplateSource = $("#artists-template").html();

【讨论】：