如何映射此 Json 以与 Handlebars js 一起使用？

Question

我有一个 Json 这种结构：

        var data = {
            "h": {
                "results": {
                    "0": {
                        "title": "Do feral cats affect small animals?",
                        "authors": " Billie Theresa Lazenby, Billie Theresa Lazenby",
                        "url": "#",
                        "published": 2012,
                        "summary": ""
                    }
                },
                "categoryTitle": "Sydney eScholarship",

            },
            "j": {
                "results": {
                    "0": {
                        "title": "Utagawa Kunisada II",
                        "description": "You can learn more ...",
                        "url": "#",
                        "thumb": "#",
                        "published": 2010
                    },
                   "1": {
                        "title": "Utagawa Kunisada II2",
                        "description": "You can learn more ...",
                        "url": "#",
                        "thumb": "#",
                        "published": 2012
                    }
                },
                "categoryTitle": "YouTube",

            }
        }

js如下：

        var source = $("#entry-template").html();
        var template = Handlebars.compile(source);
        var html = template(data);
        $('#Content').html(html);

我需要访问 data.h.categoryTitle 和 data.j.categoryTitle 作为第一次迭代，然后是 data.h.results.Title 和 data.j.results[0]。标题和 data.j.results[1 ].Title 作为嵌套迭代，这是我的模板：

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

    {{#each data}}
    <div class="searchResultItem  col-sm-9 col-xs-12">
        {{#each results}}
        <a href="#" class="title">{{this.title}}</a>
        {{/each}}
        <span>{{this.categoryTitle}}</span>
    </div>
    {{/each}}
</script>

它没有显示任何内容:-|我怎样才能用车把做到这一点？

非常感谢！

Answer 1

您在错误的大小写中输入了错误的 id，字母 "C" 在脚本中输入为大写，而在 [=21 中输入为小写=].所以它无法找到渲染生成的 html 的元素。这就是什么都没有出现的原因。

换行

var html = template(data);
$('#Content').html(html);

到

var html = template({data: data});
$('#content').html(html);

Answer 2

~~棘手的一面是转换数据以匹配 Handlebars 可以正确解释的内容。您需要能够可靠地将对象转换为数组（来源如下）。~~

Handlebars 支持遍历对象，因此请忽略我的数组转换。 来源：Handlebars/Mustache - Is there a built in way to loop through the properties of an object?

在您的 Handlebars 模板中，您可能需要按照以下几行稍微调整一下：-

<script id="entry-template" type="text/x-handlebars-template">
{{#each data}}
<div class="searchResultItem  col-sm-9 col-xs-12">
    {{#each this.results}}
    <a href="#" class="title">{{this.title}}</a>
    {{/each}}
    <span>{{this.categoryTitle}}</span>
</div>
{{/each}}
</script>

然后，要按照您的意愿在 Handlebars 中访问它，您的模板应该像这样调用：-

var html = template({data: data});
$('#Content').html(html);

请注意，这不是解决此问题所必需的 -- 只有在迭代对象可能具有挑战性的情况下才需要旧的遗留 Handlebars。这是将对象转换为数组的起点：-

var arr = Object.keys(obj).map(function(k) { return obj[k] });

要将对象转换为数组，这里有一些有用的链接：-

Converting a JS object to an array
Converting JSON Object into Javascript array

如何映射此 Json 以与 Handlebars js 一起使用？

How to map this Json to work with Handlebars js?

javascript

json

handlebars.js

handlebarshelper