Question

我有一个包含以下数据的JSON文件（只是我所拥有的一个示例），我正在使用 handlebars.js 创建模板。

我遇到的问题是我需要在页面加载时显示15个故事（在他们的div上）但是在每个页面刷新时我希望故事在页面上的不同位置。

我想我最简单的问题是 - 我如何随机化每个项目，但仍然只显示15个故事？

这是我的JSON文件的示例（但想象超过20个故事）

{
    "stories": [{
        "realTime": [{
            "id": "realTime",
                "icon": "link",
                "info": {
                "title": "Video box",
                    "type": "Link",
                    "description": "Lorem ipsum dolor ... elit nonummy quis",
                    "linkCopy": "Read more",
                    "link": "http://twitter.com"
            }
        }, {
            "id": "realWorld",
                "icon": "file-text",
                "info": {
                "title": "PDF box",
                    "type": "PDF",
                    "description": "Lorem ipsum dolor ... elit nonummy quis",
                    "linkCopy": "Read more",
                    "link": "http://www.google.co.uk"
            }
        }, {
            "id": "realResults",
                "icon": "comments",
                "info": {
                "title": "Blog here",
                    "type": "Blog",
                    "description": "Lorem ipsum dolor ... elit nonummy quis",
                    "linkCopy": "Read more",
                    "link": "http://www.google.co.uk"
            }
        }, {
            "id": "realTime",
                "icon": "comments",
                "info": {
                "title": "Blog here",
                    "type": "Blog",
                    "description": "Lorem ipsum dolor ... elit nonummy quis",
                    "linkCopy": "Read more",
                    "link": "http://www.google.co.uk"
            }
        }]
    }]
}

这是我用来检索JSON数据以及 handlebars.js 编译代码的jQuery。

$.getJSON('./assets/json/stories.json', function(data) {
        var source   = $("#block-template").html();
        var template = Handlebars.compile(source);
        $('#block-div').html(template(data));
});

Answer 1

您可以使用_.sample从列表中获取n个随机元素：

var sample = _.sample(data.stories[0].realTime, 15);
var template = Handlebars.compile(sample);

Json循环使每个页面刷新随机化

1 个答案: