如何使用 CoffeeScript 观察自定义元素中的属性？

Question

我正在尝试观察自定义元素属性的变化。不幸的是，我能找到的关于自定义元素的所有文档（几乎没有）都是用 JS 编写的，而且我不知道如何将其中一些代码转换为 CoffeeScript。

JS：

class HelloElement extends HTMLElement {
// Monitor the 'name' attribute for changes.

    static get observedAttributes() {return ['name']; }
    // Respond to attribute changes.

    attributeChangedCallback(attr, oldValue, newValue) {
        if (attr == 'name') {
            this.textContent = `Hello, ${newValue}`;
        }
    }
}

到目前为止我已经写了这个：

class HelloElement extends HTMLElement

    #STUCK HERE!
    #I can't figure out how to convert the get observedAttributes() method....

    attributeChangedCallback(attr, oldValue, newValue): ->
        if attr == 'name'
            @textContent = 'Hello, ' + newValue

但我不知道如何在 CoffeeScript 中编写 "get observedAttributes" 方法。有人可以帮我吗？ :)

谢谢

Answer 1

class HelloElement extends HTMLElement
    @observedAttributes: ['name']

    attributeChangedCallback: (attr, oldValue, newValue) ->
        console.log("attr #{ attr } changed from #{ oldValue } to #{ newValue }")

感谢 Reddit 用户 _redka (https://www.reddit.com/user/_redka/) 提供此解决方案！

如何使用 CoffeeScript 观察自定义元素中的属性？

How can I observe attributes in custom elements using CoffeeScript?

coffeescript

custom-element