Django ajax中如何使用jinja2的标签

fanne
  • 412

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

clipboard.png

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

clipboard.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>'

clipboard.png

像这种的应该怎么写法。

另外,像这种联动查询的,还有什么好的方法

现在基本都是选择查询,然后服务端返回一个list给ajax,ajax再进行拼接html渲染

感觉这种 js 拼接的 html好难写,各种单引号,双引号 ` " 搞的好乱,还要再拼接jinja2的内容,就更折腾了

回复
阅读 1.8k
1 个回答

template-driven的项目的渲染逻辑是这样的,按某种模板引擎编写模板,后端使用该引擎渲染成 html 片段,返回给客户端,也就是浏览器。而你这里直接跳过了模板引擎编译的过程,直接将未编译的模板插入了 dom 节点中。

在客户端回填服务端模板的语法是没有意义的,因为浏览器并不识别 jinja2 那套语法,这套语法是后端模板引擎编译后才能得到具体的渲染结果的,所以正确的解决方法应该是,把 if-else 的逻辑迁移至服务端,客户端只负责拼接和渲染经过后端编译的服务端模板,换言之就是,把逻辑迁移至服务端,把渲染和拼接留在客户端。

这种 template-driven 的项目对于拼接 html 字符串的需求确实比较麻烦,一般就算是使用 jquery 也尽量不要手动拼接 html 模板并直接 append 到某个 dom 节点下,而应当使用更声明式的方式进行。

现在都 2018 年了,使用一些轻量级 mvvm 框架也是很好的选择,比如 vue, 不需要任何前端工程化配置,引入即用,还享受响应式带来的便利性,何乐而不为。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏