如何让脚本在Jade中跨越多行？

Question

现在，我在导航视图中有这个部分：

script.
    links = [
        {title: 'Dashboard', url: '/'},
        { title: 'Users', sublinks: [
                {title: 'Manage', url: '/users'}
            ] }
    ]
ul.nano-content
    - each link in links
        li
            a(href="#")= link.title

但是Jade抱怨，我收到了这个错误：

Cannot read property 'length' of undefined

它指向- each link in links 。 当我将所有内容放在一行上时，这种方法很有效，但它很丑陋且难以阅读/维护，我怎样才能跨越多条线路，就像我拥有它一样？

Answer 1

您将两个JavaScript - 浏览器内代码混合在<script>标记和后端JS中。 script.内容script. （ <script/>标签）未绑定到Jade模板中使用的变量 - 因此此行中的links ：

    - each link in links

未定义 - 导致错误的直接原因。

解决方案取决于您如何编译Jade模板。 编译是一个过程，当你输入模板本身和一些数据时，它们将被绑定到模板内的变量（即links变量），并作为输出获得HTML。

例如，如果您从Node.js后端动态提供它，假设您正在使用Express.js，您可能希望定义类似于以下的路由：

app.get('/', function (req, res) {
    // .render() will take template named "index",
    // and a map with "links" property, and use it
    // to generate output HTML document.
    // Each key from the map will be bound at the template
    // level, so you'll be able to use it there.
    res.render('index', {links: [
        {title: 'Dashboard', url: '/'},
        { title: 'Users', sublinks: [
            {title: 'Manage', url: '/users'}
        ]}
    ]});
})