Question

我在Quart应用程序中使用websockets代替了ajax。目的是能够发表评论。 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变量。

有没有办法做到这一点？

Answer 1

好，所以我在评论中使用了Chris G's建议。我最终将HTML移到模板中，并使用websocket端点在HTML中呈现数据并将HTML原样返回给JavaScript。

如何在Quart / Flask / Jinja2模板标签中使用JavaScript数据？

1 个答案: