2

我正在使用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：未定义窗口

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

4

1 回答 1

4

Marko 组件旨在同时在服务器和浏览器上呈现。因此，访问window/ documentin onCreate(and onRenderand onInput) 将在这些值不存在的服务器上引发错误。此外，在将 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>

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

于 2019-04-23T18:04:50.820 回答