独立于事件

时间:2018-06-17 16:14:54

标签: javascript ruby-on-rails coffeescript

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

方法的长短是创建一个通知模型,记录涉及某些操作的用户之间的关联(即,发布帖子将在海报和所发布内容的所有者之间创建通知)

通知还拥有一个名为“读取”的属性。这默认是假的。从这里开始问题。在通知保存正确的情况下,只要我以想要接收通知的用户身份登录,就会向我的服务器发送POST请求,更改“读取”状态。为真。以下是剧本&认为该组织负责提出请求。

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函数本身没有单击事件发生。

1 个答案:

答案 0 :(得分:2)

我猜你的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(->))

在将参数列表构建为@handleClick时,您正在使用(空)匿名函数作为参数调用on。您可能希望将handleClick绑定到'click'事件,因此您想说:

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

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