客户端jade转义的问题
发布于 2年前 作者 supersheep 1822 次浏览

我在模板里写了多行的语法类似这样,希望在客户端js里拿来做ajax回调的数据渲染模板

script(type='tpl/jade')
    |ul
    |    each item in items
    |        li #{item.a}

但是这里由于item in item被作为文本解析,而#{item.a}却仍被视为变量,结果jade就报错了。 试着escape一下,变成 #{item.a},结果特么原样输出了,我不要反斜杠啊。

所以我目前很蛋疼的做法是用$替换#,然后再$(“#tpl”).replace(/$/g,"#")这样。 弱爆了简直,求指导正确的做法应该怎样。

15 回复

推荐使用ejs把,以前我也写jade,写2天我就写烦了,因为我们是独立开发,别人拿静态页面给我,然后我去写jade模版,那简直是要疯了。每种模版引擎都提供了转义,jade也不例外,不过语法忘记了,可以去查阅api:http://naltatis.github.com/jade-syntax-docs/

jade里嵌jade。。。 用ajax把客户端渲染的模版单独加载进来啊,可以有个模版服务,按名字取模板呗。 我用jade都是先写html再用html2jade转一下,然后拆分,加循环,局部微调。 客户端用渲染可以试试ember.js,很强啊~

嗯,因为是做内部用的工具,所有东西都在自己手上,所以才敢尝尝鲜。jade官方文档里的几处escape都不满足我的需求,严重怀疑是他们实现上的bug,准备去提个issue试试。多谢分享链接。

模板服务可以有,就是纯静态的内容不必要多个ajax请求还要去管理数据和模板的并行加载串行实行什么的啊。emberjs看起来根mustache挺像,果然客户端还是tag派比缩进派舒适么,其实就是不想搞两套增加后来同学的学习维护成本……

恩,mustache也很不错~ 另一个,可以试试:cdata这个filter,不过我还没用过这个。 顺带一下script的下面不用"|",可以再仔细看一下文档。

@saighost 测试下来的结论是script标签一旦加了自定义的type,不用“|”这点就失效了。另外,发现自己的环境下#就是不起作用,与多行不多行无关,写了 p #{title} 同样输出

#{title}

而非

#{title}

,不知是哪里的问题。

没理解。。。 你用p=呢?

@supersheep 需转义

p !{title}

或者

p!= title

@saighost 这样说吧,现在来看很可能是版本问题或者jade的bug。

文档说 p \#{something} 可以得到 <p&gt;#{something}</p>

但实际上我得到的确是 <p>\#{something}</p>代码再简单不过。

app.js

var jade = require("jade");
var fs = require("fs");

var fn = jade.compile(fs.readFileSync("./a.jade"));
console.log(fn());

a.jade

p \#{something}

markdown还要自己打转义,不给力啊。

@RoshanWu 你说的这个是变量的转义,我这里的文本的转义,不是一回事啊……

哈哈,果然有bug啊~~你继续写issue啊!

@supersheep 晕,哪儿的文档说p \#{something} 可以得到 <p\>#{something}</p> 我看了下,原文是这样的:

Actually want #{} for some reason? escape it! p \#{something} now we have <p>#{something}</p>

还有,既然要用自定义 type 的 script,还不如自己加个 filter 的 middleware,也可区分普通的 script 引用,譬如加入自定义的:tpl

@RoshanWu 这个估计是手误,你试一下就知道他想说的是什么意思了。就是转义之后用来转义的“\”竟然留下了。。。

@RoshanWu 打错了不好意思,jade能直接给支持的当然就不费事自己写middleware了。

回到顶部