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] .Title和data.j.results [1 ]。标题为嵌套迭代，这是我的模板：

    <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>

它没有显示任何内容： - |我怎么能用Handlebars做到这一点？

非常感谢！

Answer 1

你错误地输入了错误的id，字母“C”在脚本中输入了大写字母，而在html中输入的字母很小。所以它无法找到生成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] });

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

如何将这个Json映射到Handlebars js？

2 个答案: