Jade在<pre> tags

Question

I am new to using jade and have this simple script:

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}

Which I expect to output as:

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

With some header and footer content above and below.

However the following is output:

When I check the Chrome Inspector the code is put as a string between 'pre' tags.

Why is this happening and how do I get this to render normally? Thanks!

EDIT SOLUTION

The error was occuring in my controller code 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

If this is the output you want: Event name: example Venue: The ex. Drink Price Score: 7 Then this is the code you need each item in events | Event name: #{item.name} Venue: #{item.venue} Drink Price Score: #{item.drink_prices} You put h2 tags on each line, so of course it's going to spit out each line wrapped in <h2> tags. I'm not sure why you expected differently. The jade language is just an abstraction over HTML and the Jade compiler spits out HTML to be rendered by the browser. Jade is not the browser and browsers don't understand Jade code. Jade isn't going to read the Jade code and present you with a pretty page. It's going to spit out HTML that the browser does understand. Jade is just there to help you write cleaner looking HTML, then the Jade compiler turns the Jade document into an HTML document that the browser knows how to render.