如何在 Quart/Flask/Jinja2 模板标签中使用 javascript 数据?
How to use javascript data in Quart/Flask/Jinja2 template tag?
我在我的 Quart 应用程序中使用 websockets 代替 ajax。目的是能够post发表评论。 Quart websocket 端点处理后端方面的事情,然后我想根据从 websocket 收到的数据立即将评论附加到页面。这一切工作正常,直到我想使用模板过滤器或实用程序上下文处理器。我认为有些代码会让人理解,所以这是我在 JavaScript/jQuery:
中的 websocket 方法
$(function() {
$('.comment_form').submit(function (e) {
var add_comment_ws = $.simpleWebSocket({
url: 'wss://' + document.domain + ':' + location.port + '/websockets/_add_comment',
timeout: 100,
attempts: 10,
dataType: 'json'
});
if (typeof $(this).data('post_id') !== 'undefined') {
var post_id = $(this).data('post_id');
} else {
var post_id = null;
}
if (typeof $(this).data('reply_id') !== 'undefined') {
var reply_id = $(this).data('reply_id');
} else {
var reply_id = null;
}
var data = {
comment_body: $(this).find('textarea').val(),
post_id: post_id,
reply_id: reply_id,
user_id: $(this).data('user_id'),
complete: false
};
console.log('[+] Sending data to websocket: <add_comment_ws>: content: ' +
$.each(data, function(key, value) {
console.log(key + ' - ' + value);
})
);
add_comment_ws.send(data);
$(this).find('textarea').val('')
add_comment_ws.listen(function(data) {
console.log('[+] Received data from websocket: <add_comment_ws>: content: ' +
$.each(data, function(key, value) {
console.log(key + ' - ' + value);
})
);
var comments_list = $('#comments_list_for_' + data.id);
var comment_html = '<div class="comment">' +
'<p>' + data.comment_body +
'<p>' + data.user_display_name +
'<hr>' +
'</div>';
'<div class="comment">' +
' <hr>' +
' <div class="comment-grid-conatiner">' +
' <div class="comment-grid-item-1">' +
' <div class="comment-option-buttons comment-option-buttons-grid-conatiner">' +
' <button class="comment-vote-up-button vote-button pseudo comment-option-buttons-grid-item-1" title="This comment is useful." aria-label="up vote" data-comment_id="' + data.comment_id + '" data-user_id="' + data.user_id + '"><i class="fal fa-thumbs-up"></i></button>' +
' <div class="vote-count comment-option-buttons-grid-item-2 comment-vote-count-' + data.comment_id + '" itemprop="upvoteCount" data-value="' + data.comment_score + '">' + data.comment_score + '</div>' +
' <button class="vote-button pseudo comment-option-buttons-grid-item-3" title="This comment needs to be flagged." aria-label="up vote"><i class="fal fa-flag"></i></button>' +
' </div>' +
' </div>' +
' <div class="comment-grid-item-2">' +
' <p class="comment-body">' + data.comment_body + '</p>' +
' </div>' +
' <div class="comment-grid-item-3">' +
' <span class="comment-display-name comment-grid-item-2">' +
' <a class="comment-display-name-link" href="/users/user/' + data.user_id + '">' +
data.user_display_name +
' </a>' +
' </span>' +
' <span class="comment-date">' +
//This is where the problem is --->> {{ human_date(data.created_at) }} + //<<---
' </span>' +
' </div>' +
' </div>' +
' <hr>';
comments_list.append(comment_html);
});
e.preventDefault();
});
我已经在代码中标记了问题所在(靠近底部)。
我收到异常:
jinja2.exceptions.UndefinedError: 'data' is undefined
这是预期的,因为在 jinja 标签中它认为我们正在使用 python 变量。
有没有办法做到这一点?
好的,所以我在评论中使用 Chris G's 建议纠正了这个问题。我最终将 HTML 移动到模板中,并使用 websocket 端点在 HTML 和 return 中呈现数据 HTML 作为 JavaScript .
我在我的 Quart 应用程序中使用 websockets 代替 ajax。目的是能够post发表评论。 Quart websocket 端点处理后端方面的事情,然后我想根据从 websocket 收到的数据立即将评论附加到页面。这一切工作正常,直到我想使用模板过滤器或实用程序上下文处理器。我认为有些代码会让人理解,所以这是我在 JavaScript/jQuery:
中的 websocket 方法 $(function() {
$('.comment_form').submit(function (e) {
var add_comment_ws = $.simpleWebSocket({
url: 'wss://' + document.domain + ':' + location.port + '/websockets/_add_comment',
timeout: 100,
attempts: 10,
dataType: 'json'
});
if (typeof $(this).data('post_id') !== 'undefined') {
var post_id = $(this).data('post_id');
} else {
var post_id = null;
}
if (typeof $(this).data('reply_id') !== 'undefined') {
var reply_id = $(this).data('reply_id');
} else {
var reply_id = null;
}
var data = {
comment_body: $(this).find('textarea').val(),
post_id: post_id,
reply_id: reply_id,
user_id: $(this).data('user_id'),
complete: false
};
console.log('[+] Sending data to websocket: <add_comment_ws>: content: ' +
$.each(data, function(key, value) {
console.log(key + ' - ' + value);
})
);
add_comment_ws.send(data);
$(this).find('textarea').val('')
add_comment_ws.listen(function(data) {
console.log('[+] Received data from websocket: <add_comment_ws>: content: ' +
$.each(data, function(key, value) {
console.log(key + ' - ' + value);
})
);
var comments_list = $('#comments_list_for_' + data.id);
var comment_html = '<div class="comment">' +
'<p>' + data.comment_body +
'<p>' + data.user_display_name +
'<hr>' +
'</div>';
'<div class="comment">' +
' <hr>' +
' <div class="comment-grid-conatiner">' +
' <div class="comment-grid-item-1">' +
' <div class="comment-option-buttons comment-option-buttons-grid-conatiner">' +
' <button class="comment-vote-up-button vote-button pseudo comment-option-buttons-grid-item-1" title="This comment is useful." aria-label="up vote" data-comment_id="' + data.comment_id + '" data-user_id="' + data.user_id + '"><i class="fal fa-thumbs-up"></i></button>' +
' <div class="vote-count comment-option-buttons-grid-item-2 comment-vote-count-' + data.comment_id + '" itemprop="upvoteCount" data-value="' + data.comment_score + '">' + data.comment_score + '</div>' +
' <button class="vote-button pseudo comment-option-buttons-grid-item-3" title="This comment needs to be flagged." aria-label="up vote"><i class="fal fa-flag"></i></button>' +
' </div>' +
' </div>' +
' <div class="comment-grid-item-2">' +
' <p class="comment-body">' + data.comment_body + '</p>' +
' </div>' +
' <div class="comment-grid-item-3">' +
' <span class="comment-display-name comment-grid-item-2">' +
' <a class="comment-display-name-link" href="/users/user/' + data.user_id + '">' +
data.user_display_name +
' </a>' +
' </span>' +
' <span class="comment-date">' +
//This is where the problem is --->> {{ human_date(data.created_at) }} + //<<---
' </span>' +
' </div>' +
' </div>' +
' <hr>';
comments_list.append(comment_html);
});
e.preventDefault();
});
我已经在代码中标记了问题所在(靠近底部)。
我收到异常:
jinja2.exceptions.UndefinedError: 'data' is undefined
这是预期的,因为在 jinja 标签中它认为我们正在使用 python 变量。
有没有办法做到这一点?
好的,所以我在评论中使用 Chris G's 建议纠正了这个问题。我最终将 HTML 移动到模板中,并使用 websocket 端点在 HTML 和 return 中呈现数据 HTML 作为 JavaScript .