Question

我正在尝试使用CoffeeScript实现应用程序对话框（模态）。

目的是你做一些动作，创建一个CoffeeScript对话框对象并将其附加到页面上的数组中，以便稍后引用它们（如果有多个）。

当发生某些事件（例如点击叠加层）时，我想通过销毁叠加层隐藏叠加层以及任何现有对话框。

我也在使用jQuery。

我的目标是学习如何使用JavaScript / CoffeeScript对象与DOM交互，而不是让一堆全局事件在一个大型JS文件中触发。

目前，当我在下方拨打dialog.destroy()时，控制台（使用Chrome开发工具）声明：

Uncaught TypeError: dialog.destroy is not a function

HTML页面

<a href="#" id="create-dialog-link">Link</a>
<div id="overlay"></div>

CoffeeScript全局文件

$("#create-dialog-link").on "click", ->
  new Dialog("<div class='dialog'>content</div>")

$("#overlay").on "click", ->
  this.hide() # Hide overlay
  dialog.destroy() for dialog in window.dialogs

CoffeeScript Dialog类

class @Dialog
  constructor: (element) ->
    window.dialogs ||= [] # Initialize "global" array of dialogs
    @element = $(element) # Turn into jQuery object
    $("#overlay").show()
    @append_to_body()

  append_to_body: ->
    $("body").append(@element) # Actually add HTML to DOM
    window.dialogs.push(@element) # Store array of dialogs

  destroy: ->
    @element.remove() # Completely remove from DOM

Answer 1

在@muistooshort的帮助下找到了我的问题！

# this line...
window.dialogs.push(@element)

# should be this...
window.dialogs.push(this)

我正在推动代表DOM元素的jQuery div对象而不是Dialog对象本身。存在Dialog#destroy()，但$("div").#destroy()不存在......

CoffeeScript将对象附加到DOM

1 个答案: