Question

访问在Handlebars模板文件中使用的JSON数据的嵌套数组的正确方法是什么？

我的代码在chrome的开发环境中有效，但在Prod中不起作用。

这是我的JSON文件的示例数据。

{    
"slider-card-1": [{
            "card-img-1": "img/guillermo-rico-1368543-unsplash.jpg",
            "card-date-1": "May 29 2019",
            "card-title-1": "Deeper dive",
            "card-description-1": "Deeper dive into your finances",
            "btn-text-1": "Watch video",
            "btn-link-1": "vid.co",
            "section-header-1": "Be Heard"
        },
        {
            "card-img-2": "img/thought-catalog-685332-unsplash.jpg",
            "card-date-2": "May 29 2019",
            "card-title-2": "Experience-led Agile",
            "card-description-2": "Bringing experiences of our core stakeholders...",
            "btn-text-2": "Learn more",
            "btn-link-2": "#",
            "section-header-2": "Arya"
        },
        {
            "card-img-3": "img/thought-catalog-685332.jpg",
            "card-date-3": "Febuary 4 2019",
            "card-title-3": "Simplifying terminology",
            "card-description-3": "It can be confusing to understand terms.",
            "btn-text-3": "Read More",
            "btn-link-3": "#",
            "section-header-3": "Do it"
        }]
}

该代码进入html模板文件：

<script id="newsletter-template" type="text/x-handlebars-template">
<div>

<div>
<img src={{slider-card-1.[0].card-img-1}}>
</div>

<span>{{slider-card-1.[0].card-date-1}}</span>

<div>
{{slider-card-1.[0].section-header-1}}
</div>

<div>
{{slider-card-1.[0].card-title-1}}
</div>

<div>
{{slider-card-1.[0].card-description-1}}
</div>

<a href={{slider-card-1.[0].btn-link-1}}>
{{slider-card-1.[0].btn-text-1}}
</a>

</div>
</script>

用于编译模板的代码

<script>
        var newsletter_method = {
            handlerData: function (resJSON) {
                var templateSource = $("#newsletter-template").html(),
                    template = Handlebars.compile(templateSource),
                    newsletterHTML = template(resJSON);

                $("#my-container").html(newsletterHTML);
            },
            loadNewsletterData: function () {
                $.ajax({
                    url: "./data.json",
                    method: 'GET',
                    success: this.handlerData

                })
            }
        };

        $(document).ready(function () {
            newsletter_method.loadNewsletterData();
        });
    </script>

现在，编译模板时，在浏览器中生成的HTML为空白。有没有更好的方法来访问Handlebars中的JSON数据的嵌套数组？我该怎么做？

将Handlebars.js与JSON数据的嵌套数组一起使用

0 个答案: