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

Question

我是新手使用玉并且有这个简单的脚本：

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

如果这是你想要的输出：

事件名称：示例地点：前。饮品价格评分：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 文档。