JQuery 与 jinja2 多种形式答案

【问题标题】：JQuery with jinja2 multiple formsJQuery 与 jinja2 多种形式
【发布时间】：2019-04-30 09:18:20
【问题描述】：

我在 html 模板中从带有 jinja2 的列表生成表单，但我不确定如何在 JQuery 中链接代码。我可以很容易地排列 ID，但在 JQuery 中我不确定如何指向活动表单，因为我的 JQuery 代码似乎依赖于指向表单的硬编码值或每个都有数百行代码的混乱代码循环生成的表单。

这是我生成的表单：

{% set count = 1 %}
{% for chats in chats -%}
<li class="contact">
    <form id="{{chats[count]['chatID']}}" method="POST" action='#'>
        <div class="wrap">
            <!-- get status from get request -->                    
            <span class="contact-status online"></span>
            <!-- get profile picture from get request -->
            <img src="{{ url_for('static', filename='images/placeholder.png') }}" alt="" />
            <div class="meta">
                <!-- get contact name from get request -->
                {% if current_user == chats[count]['sender'] %}
                    <p id="user{{count}}" class="name">{{chats[count]['recipient']}}</p>
                {% else %}
                    <p id="user{{count}}" class="name">{{chats[count]['sender']}}</p>
                {% endif %}
                <!-- get last message in chat from get request -->
                <p class="preview">{{chats[count]['sender']}}: {{chats[count]['data']}}</p>
                <input type="submit" id="{{chats[count]['chatID']}}Sub" value="Join Room">
            </div>
        </div>
    </form>
</li>
{% set count = count + 1 %} 
{%- endfor %}

这是我使用 jQuery 的 JavaScript 代码：

$('form#contact').submit(function(event) {
    if (activeRoom == null){
        socket.emit('join', {room: $('#chat1').text(), username: activeUser});
        console.log('joined ' + $('#user1').text());            
        activeRoom = $('#chat1').text();//mock value
        activeUser = $('#yourUsername').text();
        console.log("welcome: " + activeUser);
        $("#12345Sub").prop('value', 'Leave Room');
        return false;
    }else{
        console.log('Leaving ' + activeRoom);
        socket.emit('leave', {room: activeRoom});
        $('#log').append('<br>' + $('<div/>').text('Goodbye: ' + activeUser).html());
        activeUser = null;
        activeRoom = null;
        $("#12345Sub").prop('value', 'Join Room');
        $("#chatMsg").empty();
        return false;
    }               
});

我可以将 jinja2 传递到 .js 文件中吗？我找不到任何可靠的东西，大多数引用似乎都是针对 .html 文件中的 JQuery。

【问题讨论】：

标签： jquery html jinja2

【解决方案1】：

事实证明，除非我使用烧瓶提供 JavaScript 文件，否则我无法将 Jinja2 传递给 JavaScript jQuery。我确实决定使用我的 Socket.io 连接从后端接收我需要的数据，这是一种快速而肮脏的方法，它并不理想，但它可以工作。更好的方法是在页面加载时向烧瓶发出 ajax 请求。虽然如果其他人正在寻找方法，第三种但不太理想的方法是在 .js 文件可以访问的 .html 模板上运行一些 JavaScript。

【讨论】：