Question

我正在尝试将通知包含在我的Rails应用程序中，我正在按照本教程中的字母https://gorails.com/episodes/in-app-navbar-notifications

进行操作。

一切顺利，直到尝试使用Javascript来获取通知div为止，我都应该从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

编辑

我最初的问题是，即使是代码的第一步（即使用jquery提取div @notifications也会失败）。但是，我知道页面已加载，因为如果我发出警告消息，它将在页面加载时执行。

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的{{1}}，从而导致您看到的错误。

对于以后的问题，请参阅有关如何创建Minimal, Complete, and Verifiable example的说明。另外，您应该在问题中包含错误消息的相关内容。

尝试获取div时出现未捕获的类型错误，无法读取未定义的属性长度

1 个答案: