循环访问未显示在 Express 应用程序中的虚拟数据

Loop through dummy data not showing up in Express app

本文关键字：虚拟 数据 应用程序 Express 访问 显示 循环      更新时间：2023-09-26

我的 Express 应用程序中有这个车把模板文件：

{{#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}}

我做错了什么？

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

{{#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}}

请注意，如果您没有第二个articles则需要在索引周围包含方括号：{{#each data.[0]}}

请参阅段文本语法：http://handlebarsjs.com/expressions.html

相关文章：