Element.clientWidth / .clientHeight 聚合物 1.0 / 传单 0.7.3答案

【问题标题】：Element.clientWidth / .clientHeight in polymer 1.0 / leaflet 0.7.3Element.clientWidth / .clientHeight 聚合物 1.0 / 传单 0.7.3
【发布时间】：2015-06-15 18:21:09
【问题描述】：

Leaflet 通常需要一个具有定义高度的 ... 作为其在普通 DOM 中的容器。我想在自定义元素中复制它。

问题是：如何让自定义元素的第一个子内容元素具有由 Leaflet 使用的 Element.clientHeight、Element.clientWidth 报告的定义的高度、宽度？

我正在尝试使用 Polymer 1.0 + 传单 0.7.3 构建自定义元素。我意识到传单对 DOM 的使用可能是一个需要管理的问题，但是我在设置传单容器以便可以首先创建有效地图时遇到问题。我认为这是因为传单使用 Element.clientHeight /.clientWidth 来生成它请求瓷砖的范围。

我在这里设置了一个 plunker：http://plnkr.co/edit/uELMbapeApmp8MBfomfr?p=info。

  console.log(this.localName + '#' + this.id + ' was attached');
  console.log("getComputedStyle("+this.localName+").height/width: " + window.getComputedStyle(this).height+"/"+ window.getComputedStyle(this).width);
  console.log(this.localName + "this.clientHeight/Width: "+this.clientHeight+ "/"+this.clientWidth);
  this.map = L.map(this.$.map, {
    center: new L.LatLng(this.getAttribute('lat'), this.getAttribute('lon')),
    zoom: this.getAttribute('zoom')
  });
  console.log("map center: "+this.map.getCenter());
  var west = this.map.getBounds().getWest(),
      south = this.map.getBounds().getSouth(),
      east = this.map.getBounds().getEast(),
      north = this.map.getBounds().getNorth();

  if (west === east || south === north) {
    console.log('ERROR: BAD EXTENT');
  }

如果您显示控制台，它应该记录首次设置地图时计算的范围。奇怪的是，如果我在本地运行它，并在 my-map.html 附加回调的第一行（上面的第一个 console.log）的第一行放置一个断点，然后单步执行，范围的计算方式不同（正确） .如果没有断点，则计算范围的高度为 0，并记录错误。

我试过了：

<template><div id="map"></div></template> <template><div id="map"><content></content></div></template>

当然，模板中根本没有内容。

【问题讨论】：

我相信至少在 Polymer 1.0 中这是一个错误或方向改变。感谢这位同事的工作github.com/prtksxna/leaflet-map-component，我能够在 Polymer ~0.3.5 上获得相同的代码。 Polymer 1.0 中的等效代码仍然根据 clientHeight 等返回错误范围。
实际上，当我说“相同的代码”时，我的意思是重构等效代码以针对 0.3.5 API 工作。
我提交了一个 Polymer 1.0 问题，github.com/Polymer/polymer/issues/1898

标签： javascript polymer leaflet polymer-1.0

【解决方案1】：

问题是附加的回调在样式等完全传输到元素之前执行。这是通过使用 async(function, [wait]) 库方法解决的。

【讨论】：

【解决方案2】：

我遇到了同样的问题，我发现我需要等待 1 毫秒才能看到我需要的宽度。我不想挂断其余的电话，因此以异步方式抛出所需的功能是有意义的。

attached: function() {
    this.async( function() {
        console.log(this.clientWidth);
    }, 1);
},

【讨论】：

仅供参考，这似乎不再是问题。我认为他们已经在框架中解决了它，但我在任何地方都找不到相关问题。