Django templating language syntax for navbar notifications

问题

I am trying to use the Django templating language in my Django Channels 2.1.2 project to render out any unread chat messages in a Facebook-style notification popup.

The list of unread chatmessages (in their respective threads) are not displaying because I am having trouble with the correct syntax.

This is how the front end looks. When you click the message icon, the notification disappears.

I have a Notification model

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()

I have the context processor also added into settings in the correct place. The notification_id should be sent using the message WebSocket and updated each time a new message is sent (I still haven't managed to do this successfully).

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>')
      }

In addition to helping me with this question, I would really appreciate any good learning resources.

回答1:

For referencing the notification message, you should use {{notifications.notification_chat.message}}. Also, for showing all notifications, you will have to loop over all the notifications.

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>

I also noticed that in your thread.html, you are not updating the notifications when you get a response from the server. you can use the ids to to prepend new notifications.

来源：https://stackoverflow.com/questions/55774025/django-templating-language-syntax-for-navbar-notifications