Coffeescript 函数独立于事件运行

Question

我最近在我的 Rails 应用程序中构建了一个通知功能，来自 GoRails => Here's the tut

该方法的长短是创建一个通知模型，该模型记录涉及某些操作的用户之间的关联（即，发布帖子将创建一个通知 b/t 发布者和发布内容的所有者） .

通知还具有一个名为“读取”的属性，默认情况下该属性为假。问题从这里开始。虽然通知正确保存，但只要我以假设接收通知的用户身份登录，就会向我的服务器发送一个 POST 请求，将“读取”更改为 true。下面是负责发出请求的脚本和视图。

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

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

    $("[data-behavior='notification-items']").html(items)
    $("[data-behavior='unread-count']").text(items.length)
    if items.length is 0
        $("[data-behavior='unread-count']").text("")               

jQuery ->
     new Notifications

还有观点：

        <li class="nav-item dropdown" data-behavior='notifications' data-behavior="notifications-link">
      <a id="notificationsDD" href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
        <%= fa_icon("bell") %><span data-behavior='unread-count'></span>
      </a>

      <div class="dropdown-menu" data-behavior="notification-items" aria-labelledby="notificationsDD">
      <!--
      <a class='dropdown-item' href='#'>yeo</a>
       -->
      </div>
    </li>

从修改脚本来看，@handleClick 函数似乎是在自行运行而没有发生点击事件。

Answer 1

我猜你的 CoffeeScript 真的是这样的：

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

    setup: -> 
        $("[data-behavior='notifications-link']").on "click", @handleClick ->

    #...

因为这与您看到的行为相匹配。

在这种情况下，问题出在您的setup 方法中：

$("[data-behavior='notifications-link']").on "click", @handleClick ->

添加方法调用括号向我们展示了问题：

$("[data-behavior='notifications-link']").on("click", @handleClick(->))

在将参数列表构建到on 时，您使用（空）匿名函数作为参数调用@handleClick。您可能想将handleClick 绑定到'click' 事件，所以您想说：

$("[data-behavior='notifications-link']").on "click", @handleClick

将@handleClick 函数作为参数传递而不调用它。