jquery - JQuery 与 jinja2 多种形式

问题描述

我在 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 的。

标签： jqueryhtmljinja2

jquery - JQuery 与 jinja2 多种形式

问题描述

解决方案

推荐阅读