有没有办法访问 marko 类中的“窗口”和“文档”引用？答案

【问题标题】：Is there a way to access the "window" and "document" references in a marko class?有没有办法访问 marko 类中的“窗口”和“文档”引用？
【发布时间】：2019-09-12 20:14:51
【问题描述】：

我正在使用Marko 并且需要访问窗口和视口高度。我需要特定 div 的高度和视口的高度。这通常是通过类似的东西来实现的

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

我可以在这样的课程中访问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: 窗口未定义

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

【问题讨论】：

标签： javascript html marko

【解决方案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>

根据您使用这些值的目的，这可能是可接受的，并且您的用户几乎不会注意到。但是，如果更新这些值会导致事情明显跳动，您可以考虑在这些值不可用时渲染一个占位符。

【讨论】：