CoffeeScript将对象附加到DOM

我试图使用CoffeeScript来实现应用程序对话框（模态）。CoffeeScript将对象附加到DOM

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

当某些事件发生时，例如点击叠加层，我想隐藏叠加层，但也要隐藏任何现有的对话框并销毁它们。

为了方便起见，我使用了jQuery。

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

此刻，当我打电话下面dialog.destroy()，控制台（使用Chrome开发者工具）指出：

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

来源

2015-12-29 Dan L

什么可能有助于找到自己的答案是意识到你不是'用coffeescript'，而是用jQuery。 Coffeescript只是解析另一个（Javascript）的语法。 – Mosselman

@ muistooshort：我用该代码更新了Dialog类的构造函数（'window.dialogs || = []'） –

@ muistooshort：为什么我需要引用'window.dialog'（单数）？目的是创建一个JS对象数组，然后在'＃overlay'的事件处理函数中为它们中的每一个调用'destroy（）'方法。我只是不确定我明白你在问什么。 –

发现我的问题与@ muistooshort一些帮助！

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

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

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

来源

2015-12-29 20:56:58

另一件我在谈论的东西看起来像这样https://gist.github.com/mu-is-too-short/e9094620ea1632346b01（未经测试的代码） –

@ muistooshort：如果你把它作为答案扔掉，我会很乐意接受它。由于我堵塞了全局窗口空间，你的代码比我所用的代码更干净。 –

虽然这不是一个真正的答案，但只是一种替代方法的建议。无论哪种情况，“push（@element）”与“push（this）”问题都是相同的。我对评论很满意，不用担心。 –

CoffeeScript将对象附加到DOM

回答

相关问题