Django ajax中如何使用jinja2的标签

Question

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

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

其中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>'

像这种的应该怎么写法。

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

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

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

Answer 1

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

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

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

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