DWQA QuestionsCategory: ProgramHow to use jinja2 tag in Django Ajax
fanne asked 2 months ago

I have an evil function, linkage query
clipboard.png
After the server is selected from the drop-down list, find out the content and backfill it back through Ajax
clipboard.png
The Ajax code

$('#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 here is the backfill
Now I want to add the syntax of jinja2 in it. I tried several but couldn’t do it

{%if xxx %}{% endif %}

Like this, but it doesn’t work

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
How to write something like this.
In addition, such as this linkage query, what good method
Now basically, the query is selected, and then the server returns a list to Ajax, which then performs HTML rendering
Feel this kind of JS splicing html is very difficult to write, all kinds of single quotation marks, double quotation marks` "It’s a mess. It’s even more frustrating if we have to splice the contents of jinja2

1 Answers
littleLyon answered 2 months ago

template-drivenThe rendering logic of the project is as follows: the template is written according to a template engine, and the back end uses the engine to render HTML fragments and return them to the client, that is, the browser. You skip the template engine compilation process and insert the uncompiled template into the DOM node.
It is meaningless to backfill the syntax of the server-side template on the client side, because the browser does not recognize the syntax of jinja2, which is compiled by the back-end template engine to get the specific rendering results, so the correct solution should be toif-elseThe client is only responsible for splicing and rendering the server template compiled by the back end. In other words, the logic is migrated to the server and the rendering and splicing are left in the client.
suchtemplate-drivenThe project for splicing HTML string requirements is really troublesome, generally even if it is usedjqueryTry not to manually splice the HTML template and directly append it to a DOM node, but use a more explicit way.
Now it’s 2018, with some lightweightmvvmFramework is also a good choice, for examplevueIt doesn’t need any front-end engineering configuration. It’s easy to use and enjoy the convenience brought by responsive.

fanne replied 2 months ago

I can’t eat the three most original blocks of the front end. If I look at other front-end template engines, wouldn’t it be more painful

littleLyon replied 2 months ago

Alas, to do the whole stack, you need to have this kind of comprehensive awareness. In fact, it’s not so painful. You have experience in server development. Learning the MVVM framework is a matter of minutes. There are no obstacles. You just think it’s painful, but actually it’s not so painful. If you don’t want to know the front-end direction, just follow the first way I said, and move the logic to the server.

fanne replied 2 months ago

The server-side processing logic is returned to the front-end. What is it like? I searched around and found no similar case