Есть ли способ получить доступ к ссылкам "окна" и "документа" в классе Marko? - PullRequest
Новая
       42

Есть ли способ получить доступ к ссылкам "окна" и "документа" в классе Marko?

0 голосов
/ 23 апреля 2019

Я использую 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: окно не определено

Как лучше всего получить доступ к этим значениям в моей разметке?

1 Ответ

2 голосов
/ 23 апреля 2019

Компоненты Marko предназначены для визуализации как на сервере, так и в браузере. Из-за этого доступ к window / document в onCreate (и onRender и 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>

В зависимости от того, для чего вы используете эти значения, это может быть приемлемым и в основном незаметным для ваших пользователей. Однако, если обновление этих значений приводит к тому, что что-то заметно перескочит, вы можете рассмотреть рендеринг заполнителя, когда эти значения недоступны.

...