python - 用于导航栏通知的 Django 模板语言语法
问题描述
我正在尝试在我的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}'
导航栏.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> 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()
我还将上下文处理器添加到正确位置的设置中。应该使用消息 WebSocket 发送并在notification_id
每次发送新消息时更新(我仍然没有成功地做到这一点)。
消费者.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
}
...
线程.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>')
}
除了帮助我解决这个问题之外,我非常感谢任何好的学习资源。
解决方案
要引用通知消息,您应该使用{{notifications.notification_chat.message}}
. 此外,为了显示所有通知,您必须遍历所有通知。
导航栏.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> 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
新通知。
推荐阅读
- python-3.x - 重复行创建并替换单元格值
- python - 我在这段代码中做错了什么?(斐波那契)
- elasticsearch - 索引中数组的弹性搜索查询
- android - 为什么斑马 InputScannerPlugin 停止对发送的广播做出反应?
- maven - 在 jenkinsfile 的 sh 命令中使用 ${variable}
- python - GeoPandas 和 OSMnx - 在地图上绘图
- bazel - 为什么 Bazel 不将构建工具使用的 JDK 版本作为缓存键的一部分进行哈希处理
- python - 即使不满足条件,np.where 也会评估“if-true”?
- java - 解决静态方法调用的 DeclaredType 泛型
- c# - 错误:“应用程序在未读取整个请求正文的情况下完成”Angular/C#