如何从 ajax 成功传递数据并在车把模板中呈现？

Question

我在 .hbs 文件中有这个

                    <div class="col-12 col-md-3 order-md-1">
                        <div id="notes">
                            {{#each notes}}
                                {{>note}}
                            {{/each}}
                        </div>
                    </div>

这是我的 jquery：

$.ajax({
    url: '/search/notes',
    method: 'GET',
    data: {
        search_string: 'server'
    },
    success: function(response) {
        var source = $('#notes').html()
        var template = Handlebars.compile(source)
        var context = {
            notes : response.notes,
        }
        var el_html = template(context);
        console.log(el_html)
        $('#notes').html(el_html)
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

我无法在id="notes" 上获得notes。它导致空白div。有什么帮助吗？

Answer 1

您的 Ajax 响应可能存在问题。下面的示例在没有 Ajax 的情况下工作。

setTimeout(function() {
var source = $('#notes').html()
var template = Handlebars.compile(source)
var context = {
    notes : ["test", "test2"],
}
var el_html = template(context);
console.log(el_html);
$('#notes').html(el_html);
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div class="col-12 col-md-3 order-md-1">
                        <div id="notes">
                            {{#each notes}}
                                {{this}}
                            {{/each}}
                        </div>
                    </div>