如何從 ajax 成功傳遞數據並在車把模板中渲染？

Question

我有這個 in.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>