美文网首页我的NodeJS学习之路(实践之路)
解决Swig模版filter中无法将html代码渲染的问题

解决Swig模版filter中无法将html代码渲染的问题

作者: Devid | 来源:发表于2016-02-17 13:32 被阅读897次

Swig支持自定义filter和tag,可以将内容个性化。
假如我们需要展示成这样:


Paste_Image.png

其中的“状态”字段,可以通过swig的自定义filter功能,将其渲染在页面上,而不需要在页面上直接写html代码。
ok,我们自定义一个filter:

swig.setFilter('status', function(input) {    
    if(input) {        
        return '<span class="label label-primary">有效</span>'    
    }else{        
        return '<span class="label label-danger">无效</span>'    
    }
});

页面上通过我们自定义的status filter显示:

{{ a.status | status}}

结果大大出乎我们的意料:


Paste_Image.png

没错,直接将html代码当作文本输出了!显然这不是我们想要的结果,那么怎么解决这个问题呢?

翻阅文档,我们发现有一个autoescape标签,官方解释:Control auto-escaping of variable output from within your templates.,意思就是说自动控制输出的转义。那么能不能解决我们的问题呢?答案是肯定的,完美解决了我们的问题!

{% autoescape %}{{ a.status | status}}{% endautoescape %}

关于autoescape的更多内容,请参考:http://paularmstrong.github.io/swig/docs/tags/#autoescape

相关文章

  • 解决Swig模版filter中无法将html代码渲染的问题

    Swig支持自定义filter和tag,可以将内容个性化。假如我们需要展示成这样: 其中的“状态”字段,可以通过s...

  • 2020-06-21

    1、解决React项目后台接口返回HTML 文本时无法解析渲染成正常的html问题: 2、解决微信小程序中的滚动穿...

  • React 正常渲染后端返回的HTML代码

    1、解决React项目后台接口返回HTML 文本时无法解析渲染成正常的html问题: ``` ``` 2、解决微信...

  • 6 Vue渲染页面 html模版、template模版、rend

    Vue渲染页面可使用html模版、template模版、render渲染函数;渲染过程的底层原理:模版[strin...

  • React官方文档

    HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...

  • koa2 pug引擎markdown动态渲染

    问题描述 koa2默认用pug模版,可是pug的filter是在预编译的时候渲染的,不能动态渲染 在pug页面直接...

  • SSR

    渲染:就是将数据和模版组装成html 客户端渲染(CSR) vs. 服务端渲染 (SSR)vs. 同构 客户端渲染...

  • 02、Vue-基础学习

    一、模版指令 通过模版指令(写在html中的),即是html和vue对象的粘合剂。 数据渲染 v-text、v-h...

  • 02、Vue-基础学习

    一、模版指令 通过模版指令(写在html中的),即是html和vue对象的粘合剂。 数据渲染 v-text、v-h...

  • 10-Vue基础2

    一、模版指令 通过模版指令(写在html中的),即是html和vue对象的粘合剂。 数据渲染 v-text、v-h...

网友评论

    本文标题:解决Swig模版filter中无法将html代码渲染的问题

    本文链接:https://www.haomeiwen.com/subject/mkhmkttx.html