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/>标记）的内容未绑定到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'}
        ]}
    ]});
})

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

1 个答案: