Question

我想通过JavaScript添加一些HTML，并在其上添加点击事件。因为我不想在JavaScript中编写HTML，所以我的HTML模板中包含HTML片段，在<script type="text/html">标记内，我想将它们包装在类中（这样它看起来更好，所以我可以测试功能更好）。

在我的示例中，我有一个带

的模板

<script type="text/html" id="remove-choice-button">                                
  <span class="close">×</span>
</script>

在我的CoffeeScript文件中，我有

class RemoveChoiceButton extends jQuery
  constructor: ->
    super($("#remove-choice-button").html().trim())

但是，如果我尝试将其添加到DOM中，它就不起作用，因为这会发生：

jQuery ->

  console.log new RemoveChoiceButton().html()
  //=> undefined

我在哪里弄错了？

Answer 1

我不相信jQuery就像典型的类一样。它比功能更强大。你永远不会instance = new jQuery()。 Javascript允许您使用基于类的范例，但您无法假设一切都以这种方式工作。

相反，让类继承任何东西，只需使用 jQuery。并在该类上提供一个返回jQuery对象的方法。

class RemoveChoiceButton extends jQuery
  constructor: ->
    @el = $("#remove-choice-button") # el for DOM *el*ement

  getContent: ->
    @el.html().trim()

console.log new RemoveChoiceButton().getContent()
# or
console.log new RemoveChoiceButton().el.html()

但是听起来这是一个类，这不是你真正想要的。如果你想运行一些代码来获得一个新的按钮jQuery对象，你只需要一个简单的函数。并非一切都应该是一个班级。

makeRemoveChoiceButton = ->
  $($("#remove-choice-button").html().trim())

如何在CoffeeScript中正确地继承jQuery？

1 个答案: