CoffeeScript 将对象附加到 DOM答案

【问题标题】：CoffeeScript to attach objects to DOMCoffeeScript 将对象附加到 DOM
【发布时间】：2015-12-29 19:58:49
【问题描述】：

我正在尝试使用 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 对话框类

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

【问题讨论】：

可能有助于找到你自己的答案是意识到你不是用coffeescript做的，而是用jQuery做的。 Coffeescript 只是一种解析为另一种语法（Javascript）的语法。
@muistooshort：我用该代码更新了 Dialog 类构造函数 (window.dialogs ||= [])
@muistooshort：为什么我需要引用window.dialog（单数）？目的是创建一个 JS 对象数组，然后在 #overlay 的事件处理程序中对每个对象调用 destroy() 方法。我只是不确定我明白你在问什么。
抱歉，我忽略了点击处理程序中的for 循环，因此我对dialog 和dialogs 感到困惑。您是否查看过点击处理程序中的window.dialogs 以查看它实际包含的内容，而不是您期望它包含的内容？ Dialog 类中的类属性 (@dialogs: [ ]) 会比 window.dialogs 更好，然后您可以将类方法添加到 Dialog 并在叠加层的单击处理程序中说 Dialog.destroy_all() 而不是搞乱全局变量。
@muistooshort：这是个好主意；我很好奇添加一个类级变量与一个全局窗口。我实际上发现了我的问题，并且与您所说的很接近。当我执行window.dialogs.push(@element) 时，它实际上应该是window.dialogs.push(this)...我推送的是DIV 的jQuery 对象而不是Dialog 对象。

标签： javascript jquery coffeescript javascript-objects

【解决方案1】：

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

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

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

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

【讨论】：

我所说的另一件事看起来像这样gist.github.com/mu-is-too-short/e9094620ea1632346b01（未经测试的代码）
@muistooshort：如果你把它作为答案，我很乐意接受。你的代码比我使用的更干净，因为我堵塞了全局窗口空间。
但这并不是真正的答案，只是对替代方法的建议。 push(@element) 与 push(this) 的问题在任何一种情况下都是相同的。我对评论很满意，不用担心。