Paginationjs、把手、ajax 调用和 JSON

Question

我正在尝试将 paginationjs 与 AJAX 加载的内容一起使用。这是代码

<div class="container container-fluid">

    <div id="review-container"></div>
    <div id="review-pagination"></div>

</div>

<script type="text/template" id="template-review">
    <div class="review__list">
    {{#each data}}
        {{state}}
        {{rate}}
    {{/each}}
    </div>
</script>

<script>
jQuery('#review-pagination').pagination({
    dataSource: function(done) {
        jQuery.ajax({
            type: 'GET',
            url: '/reviews.json',
            beforeSend: function() {
                jQuery('#review-container').html('<?php echo $this->__("Récupération des avis..."); ?>');
            },
            success: function(response) {
                done(response);
            }
        });
    },
    locator: 'data',
    pageSize: 5,
    showPrevious: false,
    showNext: false,
    callback: function(data, pagination) {
        console.log("===> "+typeof(data));
        console.log(data);
        //var data = JSON.stringify({ data: data });
        var html = Handlebars.compile(jQuery('#template-review').html(), {
            data: data
        });
        jQuery('#review-container').html(html);
    }
})
</script>

无论数据源类型如何（URL、函数），handlebars 似乎无法在 {{#each}}

中循环

这里是回调中两个console.log的结果

:1790 ===> object
:1791 (5) [{…}, {…}, {…}, {…}, {…}]
0: {state: "4", rate: "4", canal: "online", id_review: "eb53a2a3-09aa-42e4-b475-6233383ee634", order_ref: "100246459", …}
1: {state: "4", rate: "5", canal: "online", id_review: "cb581889-2439-4e43-b36b-dbfdc5ae1139", order_ref: "100244923", …}
2: {state: "4", rate: "4", canal: "online", id_review: "77506f2f-9b77-41a3-9e4c-37b477c943ce", order_ref: "100250211", …}
3: {state: "4", rate: "5", canal: "online", id_review: "de85eba0-4e84-4c47-915c-5fdf0157eb5b", order_ref: "100249780", …}
4: {state: "4", rate: "5", canal: "online", id_review: "b77f6a0f-9dd8-47cd-ad73-4bff3150e832", order_ref: "100251412", …}
length: 5
__proto__: Array(0)

分页生成良好，但缺少所有内容（来自 json）。好像是空的。

有人帮忙吗？

Answer 1

你的问题是你试图使用调用 Handlebars.compile 的结果，就好像它是 HTML 的字符串一样，但是 Handlebars.compile returns 是一个函数，不是字符串。

使用 Handlebars 实际上有两个部分：

将您的模板编译成模板函数。
使用上下文数据调用模板函数。

您正试图通过将上下文数据传递给 Handlebars.compile 调用来将这两个步骤合二为一，但这行不通。执行模板函数前需要先编译

var template = Handlebars.compile(jQuery('#template-review').html());
var html = template({
    data: data
});
jQuery('#review-container').html(html);

此外，将 callback 函数的编译移出是明智的，因为您不需要多次编译模板（已编译的模板函数没有改变，只有它调用的上下文值发生了变化。

我创建了一个fiddle供您参考。

Paginationjs、把手、ajax 调用和 JSON

Paginationjs, handlebars, ajax call and JSON

ajax

json

handlebars.js