Я получаю необработанную ошибку типа, не могу прочитать длину свойства undefined при попытке извлечь div

Question

Я пытаюсь включить уведомления в мое приложение rails и следую этому руководству до буквы https://gorails.com/episodes/in-app-navbar-notifications

Все идет хорошо до того момента, когда я пытаюсь получить div уведомлений с помощью Javascript, где я должен добавлять уведомления из конечной точки JSON. Но почему-то я не могу извлечь div, поэтому вся следующая логика не работает.

Если вам нужно больше кода, я с удовольствием поделюсь своим репозиторием на github. Буду очень признателен за помощь :)

_navbar.html.erb

<div class="navbar-listy-right hidden-xs hidden-sm">
<% if current_user.is_a?(User) %>
  <!-- Avatar with dropdown menu -->
    <div class="btn-group dropleft" data-behavior="notifications">
      <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" data-behavior="notifications-link">
        <i class="far fa-bell icon-selector"></i><span data-behavior="unread-count"></span>
      </a>
      <div class="dropdown-menu" data-behavior="notification-items">

      </div>
    </div>

notifications.js.coffee

class Notifications
constructor: ->
@notifications = $("[data-behavior='notifications']")
@setup() if @notifications.length > 0


setup: ->
console.log(@notifications)
$("[data-behavior='notifications-link']").on "click", @handleClick
$.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) =>
if data.length > 0
  items = $.map data, (notification) ->
    "<a class= 'dropdown-item' href='#{notification.url}'> # . 
{notification.actor} #{notification.action} 
{notification.notifiable.type}</a>"
    $("[data-behavior='unread-count']").text(items.length)
    $("[data-behavior = 'notification-items']").html(items)

else
    $("[data-behavior='unread-count']").text(items.length)
    $("[data-behavior='notification-items']").html("<p>No new notifications</p>")

   jQuery ->
   new Notifications

EDIT

Мой начальный вопрос заключается в том, что это даже первый шаг кода (т.е. получение div @notification с помощью jquery не удается). Тем не менее, я знаю, что страница загружается, потому что, если я помещаю предупреждение, она запускается при загрузке страницы.

notifications.js.coffee

class Notifications
constructor: ->
 @notifications = $("[data-behavior='notifications']")
 @setup()



setup: ->
 console.log(@notifications)



jQuery ->
new Notifications

Answer 1

В вашем handleSuccess есть две ветви if-else:

if data.length > 0
  items = ...
else
  $(...).text(items.length)

Другими словами, когда data.length больше нуля, вы ссылаетесь на length неопределенной переменной items, вызывая ошибку, которую вы видите.

Что касается будущих вопросов, см. Инструкции о том, как создать Минимальный, Полный и Проверяемый пример . Кроме того, вы должны включить соответствующие биты сообщения об ошибке в ваш вопрос.