javascript - 独立于事件运行的 Coffeescript 函数

Question

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

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

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

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

和 View :

        <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 绑定(bind)到 'click' 事件，所以你想说:

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

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