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

Question

现在，我在导航 View 部分中有这个:

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

它指向- links 中的每个链接。当我将所有内容都放在一行上时，这是可行的，但它很难看并且难以阅读/维护，我怎样才能像我一样跨越多行？

Answer 1

您正在混合保存在 <script> 之间的两段 JavaScript - 浏览器内代码标签和后端JS。 script.的内容( <script/> 标签)未绑定(bind)到 Jade 模板中使用的变量 - 所以 links在这一行中:

    - each link in links

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

解决方案取决于您如何编译 Jade 模板。编译是一个过程，您将模板本身和一些将绑定(bind)到模板内部变量(即 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'}
        ]}
    ]});
})