Jade 在 <pre> 标签内输出原始 HTML

Question

我刚开始使用 jade 并且有这个简单的脚本：

extends layout 

block page
    - var menu = 'events' 

block content
    div event
        each item in events
            | Event name: #{item.name} Venue: #{item.venue}  Drink Price Score: #{item.drink_prices}

我希望输出为：

Event name: example Venue: The ex. Drink Price Score: 7

上面和下面有一些页眉和页脚内容。

但是输出如下：

当我检查 Chrome Inspector 时，代码作为 string 放在 'pre' 标签之间。

为什么会发生这种情况，如何让它正常呈现？谢谢！

编辑解决方案

我的控制器代码出现错误 event.js

exports.list = function(req, res, next) { 
req.models.Event.list(function(error, events) {
    if (error) return next(error);
//  res.send({events:events});         <-- offending line 
    res.render('event', { events: events } ); 
});
};

Answer 1

如果这是你想要的输出：

Event name: example Venue: The ex. Drink Price Score: 7

那么这就是您需要的代码

each item in events
  | Event name: #{item.name} Venue: #{item.venue} Drink Price Score: #{item.drink_prices}

你把 h2 标签放在每一行上，所以它当然会吐出包裹在 <h2> 标签中的每一行。我不确定你为什么会有不同的期望。

jade 语言只是对 HTML 的抽象，Jade 编译器吐出 HTML 由浏览器呈现。 Jade 不是浏览器，浏览器不理解 Jade 代码。 Jade 不会阅读 Jade 代码并向您展示漂亮的页面。它会吐出 HTML 浏览器确实理解。 Jade 就在那里帮助您编写更清晰的外观 HTML，然后 Jade 编译器将 Jade 文档转换为浏览器知道如何呈现的 HTML 文档。

Jade 在 <pre> 标签内输出原始 HTML

Jade outputting raw HTML inside <pre> tags

html

node.js

pug