有没有办法访问 marko class 中的 "window" 和 "document" 引用？

Question

我正在使用 Marko 并且需要访问 window 和视口高度。我需要特定 div 的高度和视口的高度。这通常是通过类似于此

的东西来实现的

var viewportHeight = window.innerHeight
var elementHeight = document.getElementById("#myDiv").clientHeight

我可以像这样在 class 中访问 window 和 document 吗？

class {
    onCreate(){
        var windowHeight = window.innerHeight
        var elementHeight = document.getElementById("#myDiv").clientHeight
        this.state = { winHeight: winHeight, elemHeight: elementHeight }
    }
}

#myDiv
    p -- ${state.winHeight}
    p -- ${state.elemHeight}

我遇到错误：

ReferenceError: 文档未定义

ReferenceError: window 未定义

在我的标记中访问这些值的最佳方式是什么？

Answer 1

Marko 组件旨在同时在服务器和浏览器上呈现。因此，在 onCreate（以及 onRender 和 onInput）中访问 window/document 将在这些值不存在的服务器上引发错误。此外，在将 DOM 节点安装到文档之前，您无法对其进行测量。

出于这些原因，onMount 可能是放置此逻辑的最佳位置。 onMount仅在浏览器中调用，并且节点存在于DOM之后。

但这确实意味着您的初始渲染不会完全正确。您可能需要将 state.winHeight 和 state.elemHeight 默认设置为某些内容。初始渲染后，将进行测量并且您的组件将更新以反映新值。

class {
  onCreate() {
    this.state = { winHeight:0, elemHeight:0 }
  }
  onMount() {
    this.state.elemHeight = this.getEl("measure").clientHeight;
    this.state.winHeight = window.innerHeight;
  }
}

<div key="measure">
  <p>Element ${state.elemHeight}!</p>
  <p>Window ${state.winHeight}!</p>
</div>

根据您将这些值用于什么目的，这可能是可以接受的，而且大多数情况下您的用户不会注意到。但是，如果更新这些值导致事物明显跳跃，您可能会考虑在这些值不可用时呈现占位符。

有没有办法访问 marko class 中的 "window" 和 "document" 引用？

Is there a way to access the "window" and "document" references in a marko class?

html

javascript

marko