javascript - 循环遍历 Express 应用程序中未显示的虚拟数据

Question

我的 Express 应用程序中有这个 Handlebars 模板文件:

{{#each data}}
<article class="id-{{this.id}}">
    <h1><a href="/journal/{{this.url}}">{{this.title}}</a></h1>
    <p>{{this.body}}</p>
</article>

{{else}}
    <p class="empty">No content</p>
{{/each}}

这是路由器:

router.get('/', function(req, res, next) {
    res.render('blog-index', {
        layout: 'main',
        title: 'Journal',
        data: articles
    });
});

如果我使用这个 javascript 循环作为虚拟数据，它会毫无问题地显示内容:

var articles = [{
    id : '0',
    url : 'foo',
    title: 'Foo',
    body: 'some foo bar',
    category: 'foo',
    tags: [
        'foo'
    ]
}, {
    id: '1',
    url: 'foo-bar',
    title: 'Foo bar',
    body: 'more foo bar',
    category: 'foo',
    tags: [
        'foo',
        'bar' 
    ]
}, {
    id: '2',
    url: 'foo-bar-baz',
    title: 'Foo bar baz',
    body: 'more foo bar baz',
    category: 'foo',
    tags: [
        'foo',
        'bar',
        'baz'
    ]
}];

但是，如果我使用以下虚拟数据，则不会显示任何内容:

var articles = [{
    articles : [{
        id : '0',
        url : 'foo',
        title : 'Foo',
        body : 'some foo bar',
        category : 'foo',
        tags : [
            'foo'
        ]
    }, {
        id : '1',
        url : 'foo-bar',
        title : 'Foo bar',
        body : 'more foo bar',
        category : 'foo',
        tags : [
            'foo', 'bar'
        ]
    }, {
        id : '2',
        url : 'foo-bar-baz',
        title : 'Foo bar baz',
        body : 'more foo bar baz',
        category : 'foo',
        tags : [
            'foo',
            'bar',
            'baz'
        ]
    }]
}, {
    users : [{
        name: 'Admin'
    }, {
        name: 'User'
    }]
}];

我将模板文件修改为:

{{#each data.articles}}
<article class="id-{{this.id}}">
    <h1><a href="/journal/{{this.url}}">{{this.title}}</a></h1>
    <p>{{this.body}}</p>
</article>

{{else}}
    <p class="empty">No content</p>
{{/each}}

我做错了什么？

Answer 1

您有两个级别的文章。所以你必须做这样的事情才能进入第二个:

{{#each data.0.articles}}
    <article class="id-{{this.id}}">
        <h1><a href="/journal/{{this.url}}">{{this.title}}</a></h1>
        <p>{{this.body}}</p>
    </article>

    {{else}}
        <p class="empty">No content</p>
{{/each}}

请注意，如果您没有第二篇文章，则需要在索引两边加上方括号:{{#each data.[0]}}

参见段文字语法:http://handlebarsjs.com/expressions.html