V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fanne
V2EX  ›  Django

Django ajax 中如何使用 jinja2 的标签

  •  
  •   fanne · 2018-11-18 17:47:40 +08:00 · 3503 次点击
    这是一个创建于 2196 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我有个作孽的功能,联动查询

    FS1MM4.png

    下拉选择服务器之后,把所符合的内容查询出来,通过 ajax 回填回去

    FS1lL9.png

    其中 ajax 代码

    $('#group_id').change(function () {
                var group_id = $("#group_id").val();
                $.ajax({
                    data: {'group_id': group_id, csrfmiddlewaretoken: '{{ csrf_token }}'},
                    type: 'POST',
                    url: '/pro1/gamebuild/' + group_id + '/',
                    success: function (data) {
                        var json_data = JSON.parse(data);
                        var content = '';
                        $.each(json_data, function (i, item) {
                            content += ' <tr> <td>' + item.groupname + '</td> ' +
                                '<td>' + item.game_name + '</td>  ' +
                                '<td><div class="font-bold">' +
                                '<button class="btn btn-info" action_id="' + item.id + '" version_value="trunk" game_name=' + item.game_name + ' groupname=' + item.groupname + ' type="button" onclick="BuildFun(this)">' +
                                ' <i class="fa fa-paste"></i>' + item.version+'</button>'+
                                '</div></td></tr>'
                        });
                        $("#ossfile-tab-body").html(content)
                    }
    
                })
            });
    
    content 这里就是回填的

    那我现在想要在这里里面添加 jinja2 的语法,试了几种都不行的

    {%if xxx %}{% endif %}

    类似这样的,但都没法生效

    content += ' <tr> <td>' + item.groupname + '</td> ' +
    '<td>' + item.game_name + '</td>  ' +
    '<td><div class="font-bold">' +
    '<button class="btn btn-info" action_id="' + item.id + '" version_value="trunk" game_name=' + item.game_name + ' groupname=' + item.groupname + ' type="button" onclick="BuildFun(this)">' +
    ' <i class="fa fa-paste"></i>' + {% if item.version == "trunk" %}item.version {% elif item.version == "branch" %}ddd{% endif %}+'</button>'+
    '</div></td></tr>'
    

    FS1tJK.png

    像这种的应该怎么写法。

    18 条回复    2018-11-19 14:00:26 +08:00
    Trim21
        1
    Trim21  
       2018-11-18 17:51:35 +08:00
    item 是个 js 变量, 你只能用 js 拼接, 没法用 jinja
    if 后面的 item 是 jinja 传进去的 context, 而不是你函数参数里面的那个 item
    fanne
        2
    fanne  
    OP
       2018-11-18 17:54:33 +08:00
    @Trim21 #1 那要做判断,有解么?
    Trim21
        3
    Trim21  
       2018-11-18 17:55:02 +08:00
    @fanne 直接用 js 的 if 语句啊...
    fanne
        4
    fanne  
    OP
       2018-11-18 18:24:07 +08:00
    @Trim21 #3 我现在用 js 的 if 语法

    content += ' <tr> <td>' + item.groupname + '</td> ' +
    '<td>' + item.game_name + '</td> ' +
    '<td><div class="font-bold">' +
    '<button if ('+item.status +'== 1) {disabled="disabled"} class="btn btn-info" action_id="' + item.id + '" version_value='+ item.version+' game_name=' + item.game_name + ' groupname=' + item.groupname + ' type="button" onclick="BuildFun(this)">' +
    ' <i class="fa fa-paste"></i>' +item.version +'</button>'+
    '</div></td></tr>'

    item.status typeof 打印出来的类型是 number 的,数据库中有值为 1 的,但貌似没有起作用。
    Trim21
        5
    Trim21  
       2018-11-18 18:29:56 +08:00
    @fanne #4 ...我不是这个意思...
    你会 js 吗... 建议先看看 javascript
    Trim21
        6
    Trim21  
       2018-11-18 18:47:38 +08:00
    你这里的 item 是在 jinja2 渲染完模板,在浏览器运行这段 js 代码的时候才会创建的一个变量。
    所以对 item 属性的判断只能用 js 而不能用 jinja。
    你虽然是在修改模板,但这里实际上是在修改会在用户浏览器运行的 js 代码,所以这里写的是纯粹的 js 代码,不能用
    <button if ('+item.status +'== 1) {disabled="disabled"}
    这样看起来像是模板语句的写法。 应该是
    '<button ' + item.status == 1 ? "disabled " : '' + 'class="btn btn-info"'
    fanne
        7
    fanne  
    OP
       2018-11-18 19:10:37 +08:00
    @Trim21 #5 了解一些,不是很熟,我查了,大致是这样的,所以才有上面的写法。

    if (条件)
    {
    只有当条件为 true 时执行的代码
    }

    现在其他的都搞完了,就一个 item.status 状态判断为 1,那 button 的状态为 disabled,不可点击,卡了我一个周末了

    大佬,能否基于这个帮忙搞一下。
    Trim21
        8
    Trim21  
       2018-11-18 19:14:54 +08:00
    @fanne #7 看六楼
    fanne
        9
    fanne  
    OP
       2018-11-18 21:15:51 +08:00
    回复提示 有外链
    贴图片


    页面错乱了

    fanne
        10
    fanne  
    OP
       2018-11-18 21:16:32 +08:00
    @Trim21 #8 9 楼,忘记 @了
    Trim21
        11
    Trim21  
       2018-11-18 21:35:28 +08:00
    @fanne #10 字符串拼接错了吧......
    你还是先看看 js 吧- - 就是字符串拼接和三元运算符
    fanne
        12
    fanne  
    OP
       2018-11-19 00:33:41 +08:00
    @Trim21 #11 用了一个更简单粗暴的




    不过显示有点问题,功能倒是完成了。。。。多谢哈🙏,js 的还需要研究研究
    ticotico
        13
    ticotico  
       2018-11-19 04:23:28 +08:00 via Android
    搜一下 varbatim ?
    sunshengkai27
        14
    sunshengkai27  
       2018-11-19 09:08:58 +08:00
    #13 +1, 同时使用 js_render 代码要好看的多
    fanne
        15
    fanne  
    OP
       2018-11-19 09:09:26 +08:00
    @ticotico #13 这是啥,搜了一下,好像没看到相关内容的。
    fanne
        16
    fanne  
    OP
       2018-11-19 09:33:35 +08:00
    @sunshengkai27 #14 这个是 vue 的用法么
    fanne
        17
    fanne  
    OP
       2018-11-19 09:35:09 +08:00




    这样就正常了。
    sunshengkai27
        18
    sunshengkai27  
       2018-11-19 14:00:26 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2824 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 09:26 · PVG 17:26 · LAX 01:26 · JFK 04:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.