如何讓腳本在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'}
        ]}
    ]});
})