用于导航栏通知的 Django 模板语言语法

Question

我正在尝试在我的Django Channels 2.1.2 项目中使用 Django 模板语言在 Facebook 样式的通知弹出窗口中呈现任何未读的聊天消息。

未读的chatmessages 列表（在它们各自的threads 中）没有显示，因为我在使用正确的语法时遇到了问题。

这就是前端的样子。当您单击消息图标时，通知会消失。

我有一个Notification 模型

class Notification(models.Model):
    notification_user = models.ForeignKey(User, on_delete=models.CASCADE)
    notification_chat = models.ForeignKey(ChatMessage, on_delete=models.CASCADE)
    notification_read = models.BooleanField(default=False)

    def __str__(self):
        return f'{self.id}'

navbar.html

 {% if user.is_authenticated %}
  <li id="notification_li" class="nav-item">
    <a class="nav-link" href="#" id="notificationLink">
      <i class="fas fa-envelope"></i>&nbsp; Inbox</a>
      {% for notifications in notification %}
      <span id="notification_id">{{ notifications.notification_chat }}</span>
      {% endfor %}
      <div id="notificationContainer">
            <div id="notificationTitle">Notifications</div>
            <div id="notificationsBody" class="notifications">
            {{ notification.notification_chatessage?? }}
            </div>
            <div id="notificationFooter"><a href="{% url 'chat:inbox' %}">See All</a></div>
      </div>
  </li>

base.html

  <script>
    $(document).ready(function() {
      $("#notificationLink").click(function() {
        $("#notificationContainer").fadeToggle(300);
        $("#notification_id").fadeOut("slow");
        return false;
      });

      //Document Click hiding the popup
      $(document).click(function() {
        $("#notificationContainer").hide();
      });

      //Popup on click
      $("#notificationContainer").click(function() {
        return false;
      });
    });
  </script>

context_processors.py

def notification(request):
    if request.user.is_authenticated:
        notification = Notification.objects.filter(notification_user=request.user)
        return {'notification':notification}
    return Notification.objects.none()

我在设置中也添加了上下文处理器 在正确的地方。 notification_id 应该使用消息 WebSocket 发送，并在每次发送新消息时更新（我仍然没有成功地做到这一点）。

consumers.py

async def websocket_receive(self, event):
        # when a message is received from the websocket
        print("receive", event)

        message_type = event.get('type', None)  #check message type, act accordingly
        if message_type == "notification_read":
             # Update the notification read status flag in Notification model.
             notification = Notification.object.get(id=notification_id)
             notification.notification_read = True
             notification.save()  #commit to DB
             print("notification read")

        front_text = event.get('text', None)
        if front_text is not None:
            loaded_dict_data = json.loads(front_text)
            msg =  loaded_dict_data.get('message')
            user = self.scope['user']
            username = 'default'
            if user.is_authenticated:
                username = user.username
            myResponse = {
                'message': msg,
                'username': username,
                'notification': notification_id  # send a unique identifier for the notification
            }
            ...

thread.html

   ...
      // below is the message I am receiving
      socket.onmessage = function(e) {
        var data = JSON.parse(event.data);
        // Find the notification icon/button/whatever
        // and show a red dot, add the notification_id to element as id or data attribute.
        console.log("message", e)
        var chatDataMsg = JSON.parse(e.data)
        chatHolder.append('<li>' + chatDataMsg.message + ' from ' + chatDataMsg.username + '</li>')
      }

除了帮助我解决这个问题之外，我非常感谢任何好的学习资源。

Answer 1

要引用通知消息，您应该使用{{notifications.notification_chat.message}}。此外，为了显示所有通知，您必须遍历所有通知。

navbar.html

{% if user.is_authenticated %}
              <li id="notification_li" class="nav-item">
                <a class="nav-link" href="#" id="notificationLink">
                  <i class="fas fa-envelope"></i>&nbsp; Inbox</a>
                  {% for notifications in notification %}

                  <span id="inbox-{{notifications.id}}">{{ notifications.notification_chat.message }}</span>

                  {% endfor %}
                  <div id="notificationContainer">
                        <div id="notificationTitle">Notifications</div>
                        <div id="notificationsBody" class="notifications">
                        {% for notifications in notification %}

                            <span id="notification-{{notifications.id}}">{{ notifications.notification_chat.message }}</span>

                        {% endfor %}
                        </div>
                        <div id="notificationFooter"><a href="{% url 'chat:inbox' %}">See All</a></div>
                  </div>
              </li>

我还注意到，在您的thread.html 中，当您收到服务器的响应时，您并没有更新通知。您可以使用 id 来发送prepend 新通知。