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

Question

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

notifications.js.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":"liked","notifiable":{"type":"your list"},"url":"/lists/10#list_10"}, {"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/10#list_10"},{"actor" :"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/10#list_10"},{"actor":"emanuelcoen" ,"action":"liked","notifiable":{"type":"your list"},"url":"/lists/10#list_10"},{"actor":"emanuelcoen","action" :"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked" ,"notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable" :{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type ":"你的名单"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"你的list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"}, “网址”：“/列表/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17 "},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"}]

Answer 1

您传递给$.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 理解替换了它。