未捕获的引用错误，未定义通知

Posted 2021-04-16

我正在尝试向我的rails应用添加通知。基本上我从JSON端点获取它们，我尝试获取它们并使用一些CoffeescriptHere's the JSON array将它们附加到我的html。问题是在handleSuccess方法中，我得到未捕获的引用错误，未定义通知

notifications.就是.coffee

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

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

  handleSuccess: (data) =>
   console.log(data)
   items = $.map data, (notification) ->
      "<a class='dropdown-item' href='#{notification.url}'># 
      {notification.action} #{notification.notifiable.type}</a>"

jQuery ->
 new Notifications

我从localhost：3000 / notifications.json得到什么

[{“actor”：“emanuelcoen”，“action”：“likes”，“notifiable”：{“type”：“your list”}，“url”：“/ lists / 10＃list_10”}，{“actor “：”“emanuelcoen”，“action”：“喜欢”，“通知”：{“type”：“your list”}，“url”：“/ lists / 10＃list_10”}，{“actor”：“emanuelcoen “，”action“：”likes“，”notifiable“：{”type“：”your list“}，”url“：”/ lists / 10＃list_10“}，{”actor“：”emanuelcoen“，”action “：”喜欢“，”通知“：{”type“：”your list“}，”url“：”/ lists / 10＃list_10“}，{”actor“：”emanuelcoen“，”action“：”赞“ “，”通知“：{”type“：”your list“}，”url“：”/ lists / 17＃list_17“}，{”actor“：”emanuelcoen“，”action“：”likes“，”notifiable“ “：{”type“：”your list“}，”url“：”/ lists / 17＃list_17“}，{”actor“：”emanuelcoen“，”action“：”likes“，”notifiable“：{”键入“：”你的列表“}，”url“：”/ lists / 17＃list_17“}，{”actor“：”emanuelcoen“，”action“：”likes“，”notifiable“：{”type“：”你的清单“}，”url“：”/ lists / 17＃list_17“}，{”演员“：”emanuelcoen“，”行动“：”喜欢“，”通知“：{”type“：”你的清单“} ，“url”：“/ lists / 17＃list_17”}，{“actor”：“emanuelcoen”，“action”：“likes”，“notifiable”：{“type”：“your list”}，“url” ：“/列表/ 17 ＃list_17“}，{”演员“：”emanuelcoen“，”行动“：”喜欢“，”通知“：{”type“：”your list“}，”url“：”/ lists / 17＃list_17“} ，{“演员”：“emanuelcoen”，“行动”：“喜欢”，“通知”：{“type”：“your list”}，“url”：“/ lists / 17＃list_17”}]

答案

您传递给$.map的函数中有缩进错误。它下面的字符串必须缩进，否则它假定你传递一个空函数来映射，并且它后面的行引发错误，因为没有定义notification。

  handleSuccess: (data) =>
   console.log(data)
   items = $.map data, (notification) ->
     "<a class='dropdown-item' href=''>#{notification.actor}</a>"

---

更新

关于通知未在页面上显示的注释 - 您没有调用任何代码来将生成的html字符串添加到DOM。你可以使用$.append。

  handleSuccess: (data) =>
   console.log(data)
   for notification in data
     @notifications.append(
       "<a class='dropdown-item' href=''>#{notification.actor}</a>")

没有必要在通知数组上使用$.map，因为我们只是在另一个循环中渲染它们，所以我用一个Coffeescript理解来替换它。