node.js - Express + Jade在解析json的时候,html标签也当成普通字符串了,怎么解决呢?
ringa_lee
ringa_lee 2017-04-17 11:15:51
0
4
652

//postList.json

[
{
    "title": "天文学家发现'巨型地球'",
    "date": "2014.06.08",
    "post": "<p>大自然总是会让人捉摸不透</p><p>发现第一颗外星行星,不过是20年前的事情。在这一领域,我们依然是初学者。</p><p>我们才刚刚开始发现惊奇。在茫茫宇宙之中,还有更多古怪之地等着我们去发现。</p>"
},
{
    "title": "天文学家发现'巨型地球'",
    "date": "2014.06.08",
    "post": "<p>大自然总是会让人捉摸不透</p><p>发现第一颗外星行星,不过是20年前的事情。在这一领域,我们依然是初学者。</p><p>我们才刚刚开始发现惊奇。在茫茫宇宙之中,还有更多古怪之地等着我们去发现。</p>"
}
]

//postlist.jade

article.site-list
  - each val in posts
    section.list
      h3.title= val.title
      p.date
        span 发表于
        time= val.date
      p.content= val.post

//index.js

var express = require('express');
var router = express.Router();
var datapostlist = require('../data/postList.json');

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { 
    title: 'jaySite',
    userName: 'Jay.Creater',
    userEmail: 'jaycreater@163.com',
    posts: datapostlist
  });
});

module.exports = router;

//app.js

...
var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(require('node-compass')({mode: 'expanded'}));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);
...
ringa_lee
ringa_lee

ringa_lee

全員に返信(4)
洪涛

使用 p.content!= val.post

See http://jade-lang.com/reference/code/

いいねを押す +0
PHPzhong

更习惯用 #{locals.xxx} 这种写法。

然后 !{locals.xxx} 就是不转义的写法,默认会转义

いいねを押す +0
Peter_Zhu

我也想问这个问题,我没有用jade,express抛出来的直接是字符串

いいねを押す +0
黄舟

如果是服务器传过来的数组对象如 items = [{title: 'hello'}, {title: 'b'}]
要想显示出来:

-items.forEach(function(item) {
    h2
        a(href="#")=item.title
    

由于jade为了保护而转义了html里的标签和脚本,使用!=可以阻止转义:

p!=item.title

可参考jade的文档:http://jade-lang.com/reference/code/

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート