Django 模板传值给 JS,换行符的问题

2019-06-28 19:02:35 +08:00
 piaochen0

背景如下:
数据库表 Worker 中有一个 des 字段,其中内容有换行符。

1.前端直接使用<textarea cols="30" rows="10">{{worker.des}}</textarea>的方式显示,换行是正常的。

2.因为涉及 js 处理,需要把{{worker.des}}的值传递给 js 方法,经过处理后再设置到 textarea 中,此时我没有做任何处理,只是做了传值处理,然后重新把内容设置到 textarea 中,换行效果就没了。
例如:document.getElementById('des').innerText='{{worker.des}}';

3.进一步验证,怀疑传值给 js 的时候,换行符因为某种原因被删了,打印两者的长度信息:
{{worker.des|length}} 比 js 代码'{{worker.des}}'.length 的长度多 1

问题:
1.这是什么原因?
2.在 Django 的前端怎么处理这个问题,能让我能在 js 处理后,能在 textarea 中正确显示换行。
3.我想过在后端 view 中把换行符替换成 br,不过这个是最后实在不行的方案吧。

2205 次点击
所在节点    Python
4 条回复
piaochen0
2019-06-28 19:55:00 +08:00
我找到解决方法了
JS 方法的参数中,带有换行符的话,会有问题,
采用标签中设置自定属性,例如:data_value 的方式放置模板中传来的值,然后在 js 方法中取就可以避免。
但是参数中为嘛不行,我就不知道了。
autoxbc
2019-06-28 23:56:12 +08:00
不知道 {{worker.des}} 实际内容是什么,如果里面含有未转义的换行符,那么当执行这一句时
document.getElementById('des').innerText='{{worker.des}}';
应该会在浏览器端触发一个非法的多行字符串错误(很奇怪你的实际结果仅仅丢了换行符)

var test = 'abc
xyz';
// 这是不合法的

如果提前做了转义( \n )或者用 ES6 的模板字符串(反引号 ``),可以消除这个错误
document.getElementById('des').innerText=`{{worker.des}}`;

html 标签中的换行符会被原样保留,这是 #1 可行的可能原因
xpresslink
2019-06-28 23:57:17 +08:00
<textarea cols="30" rows="10">{{worker.des|linebreaks}}</textarea>


document.getElementById('des').innerText='{{worker.des|escapejs}}';
frostming
2019-07-01 11:43:52 +08:00
模板传数据给 js,用 JSON 序列化一下是常识,不用包任何符号在外面

document.getElementById('des').innerText={{worker.des|jsonify}}

jsonify 并不是 django 内置的 filter,需要自己实现一下,网上随便搜就有

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/578404

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX