V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
piaochen0
V2EX  ›  Python

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

  •  
  •   piaochen0 · 2019-06-28 19:02:35 +08:00 · 2204 次点击
    这是一个创建于 1975 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景如下:
    数据库表 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,不过这个是最后实在不行的方案吧。

    4 条回复    2019-07-01 11:43:52 +08:00
    piaochen0
        1
    piaochen0  
    OP
       2019-06-28 19:55:00 +08:00
    我找到解决方法了
    JS 方法的参数中,带有换行符的话,会有问题,
    采用标签中设置自定属性,例如:data_value 的方式放置模板中传来的值,然后在 js 方法中取就可以避免。
    但是参数中为嘛不行,我就不知道了。
    autoxbc
        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 可行的可能原因
    xpresslink
        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}}';
    frostming
        4
    frostming  
       2019-07-01 11:43:52 +08:00
    模板传数据给 js,用 JSON 序列化一下是常识,不用包任何符号在外面

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

    jsonify 并不是 django 内置的 filter,需要自己实现一下,网上随便搜就有
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2447 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 02:19 · PVG 10:19 · LAX 18:19 · JFK 21:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.