跟随链接时出现问题(带有JavaScript的应用内通知)

时间:2018-11-21 16:01:04

标签: javascript ruby-on-rails notifications bulma

因此,我遵循了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

0 个答案:

没有答案