0

我有一个具有这种结构的 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].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>

它没有显示任何东西:-| 我怎么能用把手做到这一点？

非常感谢！

4

2 回答 2

1

您在错误的情况下输入了错误的 id，字母“C”在脚本中以大写字母输入，而在 html 中以小写字母输入。所以它无法找到渲染生成的 html 的元素。这就是为什么什么都没有出现。

换行

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

至

var html = template({data: data});
$('#content').html(html);
于 2016-04-04T10:59:03.560 回答
1

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

Handlebars 支持循环对象，因此请忽略我的数组转换。资料来源：Handlebars/Mustache - 是否有内置的方法来循环对象的属性？

在您的 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);

请注意，这不是解决此问题所必需的 - 仅在迭代对象可能存在挑战时才需要旧的遗留把手。这是将对象转换为数组的起点：-

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

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

于 2016-04-04T10:59:19.447 回答