因此,我遵循了Gorails教程,了解如何实现应用内通知功能(通知铃)。它可以正常工作,但是当遵循通知dropdpwn上的链接时(实际上是跟随应用程序中的所有链接)似乎存在问题。跟随链接时,通知功能不再起作用:(仅在刷新页面时! 解决这个问题有什么想法吗?
app / assests / javascripts / notifications.coffee
class Notifications
constructor: ->
@notifications = $("[data-behavior='notifications']")
if @notifications.length > 0
@handleSuccess @notifications.data("notifications")
$("[data-behavior='notifications-link']").on "click", @handleClick
setInterval (=>
@getNewNotifications()
), 5000
getNewNotifications: ->
$.ajax(
url: "/notifications.json"
dataType: "JSON"
method: "GET"
success: @handleSuccess
)
handleClick: (e) =>
$.ajax(
url: "/notifications/mark_as_read"
dataType: "JSON"
method: "POST"
success: ->
$("[data-behavior='unread-count']").text(0)
)
handleSuccess: (data) =>
items = $.map data, (notification) ->
notification.template
unread_count = 0
$.each data, (i, notification) ->
if notification.unread
unread_count += 1
$("[data-behavior='unread-count']").text(unread_count)
$("[data-behavior='notification-items']").html(items)
jQuery ->
new Notifications
app / views / layouts / application.html.haml(布尔玛)
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%title 5igma
= csrf_meta_tags
%meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}/
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
%body
- if flash[:notice]
.notification.is-success.global-notification
%p.notice= notice
- if flash[:alert]
.notification.is-danger.global-notification
%p.alert= alert
= render 'layouts/navbar'
= yield
app / views / layouts / _navbar.html.haml
%nav.navbar.is-link{"aria-label" => "main navigation", :role => "navigation"}
.navbar-brand
= link_to root_path, class:"navbar-item" do
%h1.title.is-5.has-text-white 5igma
.navbar-burger.burger{"data-target" => "navbar"}
%span
%span
%span
#navbar.navbar-menu
.navbar-end
- if user_signed_in?
.navbar-end
.navbar-item.has-dropdown.is-arrowless{ 'data-behavior': 'notifications', "data-notifications" => "#{render template: "notifications/index", formats: [:json]}" }
%a.navbar-link#dropdown{ 'data-behavior': 'notifications-link' }
%icon.fa.fa-bell
%span.tag.is-rounded.is-small.ml1{ 'data-behavior': 'unread-count' }
.navbar-dropdown#notifications{ 'data-behavior': 'notification-items' }
app / views / notifications / index.json.jbuilder
json.array! @notifications do |notification|
json.id notification.id
json.unread !notification.read_at?
json.template render partial: "notifications/#{notification.notifiable_type.underscore.pluralize}/#{notification.action}", locals: {notification: notification}, formats: [:html]
end