背景如下:
数据库表 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,不过这个是最后实在不行的方案吧。
1
piaochen0 OP 我找到解决方法了
JS 方法的参数中,带有换行符的话,会有问题, 采用标签中设置自定属性,例如:data_value 的方式放置模板中传来的值,然后在 js 方法中取就可以避免。 但是参数中为嘛不行,我就不知道了。 |
2
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 可行的可能原因 |
3
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}}'; |
4
frostming 2019-07-01 11:43:52 +08:00
模板传数据给 js,用 JSON 序列化一下是常识,不用包任何符号在外面
document.getElementById('des').innerText={{worker.des|jsonify}} jsonify 并不是 django 内置的 filter,需要自己实现一下,网上随便搜就有 |