Как убрать «0» из панели уведомлений при отсутствии уведомления - и стиль при наличии уведомления

Question

Я создаю систему уведомлений для моего приложения rails. Метод работает, обновите таблицу и тд, все ок. Теперь я хотел бы не отображать 0, когда нет непрочитанных уведомлений. И когда есть уведомления, я бы хотел иметь возможность стиля (как здесь, с зеленым прямоугольником).

notifcation.json.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()
      ), 50000

  getNewNotifications: ->
    $.ajax(
      url: "/notifications.json"
      dataType: "JSON"
      method: "GET"
      success: @handleSuccess
    )

  handleClick: (e) =>
    $.ajax(
      url: "en/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

На мой взгляд, у меня есть следующее:

<li class="nav-item btn-group" data-behavior="notifications" data-notifications='<%= render template: "notifications/index", formats: [:json] %>'>
  <div class="dropdown-toggle nav-link" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-behavior="notifications-link">
    <span data-behavior="unread-count" class="fas fa-bell"></span>
  </div>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" data-behavior="notification-items">
  </div>
</li>

В настоящее время это выглядит так:

Answer 1

0 взято из этой строки в handleClick, просто замените любой текст, который вы хотите:

$("[data-behavior='unread-count']").text("")

и вниз при обновлении:

unread_count = 0
$.each data, (i, notification) ->
  if notification.unread
    unread_count += 1
if(unread_count == 0) unread_count = ""
$("[data-behavior='unread-count']").text(unread_count)