domReady 与 ready - 迁移到 Polymer 1.0

Question

在 Polymer0.5 中，我有以下代码：

模板：

<div class="scroll">
    <div class="content">
        <content></content>
    </div>
</div>

脚本：

domReady: function() {
    var width = $(this.shadowRoot).find('.content')[0].scrollWidth;
}

这段代码有效，我收到了一个非零的宽度值。

现在我正在尝试迁移到 Polymer1.0，我添加了一个 ID 到 div:

<div class="scroll">
    <div id="content" class="content">
        <content></content>
    </div>
</div>

脚本现在是：

ready: function() {
    var width = this.$.content.scrollWidth;
}

但是，这个宽度是0。

旧的domReady函数和新的ready函数有区别吗？我也尝试过使用 attached 函数，但它也没有用。

当我稍后尝试访问 width 时（通过按下按钮触发），然后我得到了我正在寻找的非零值。

元素是这样使用的：

<my-scrollbar>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus leo, sagittis lobortis velit vel, viverra vulputate purus. Proin lacinia magna eu erat iaculis, eget mollis lectus mattis. 
</my-scrollbar>

所以内部文本决定了元素的尺寸。

Answer 1

事实证明，我的原始代码在 Safari 中有效，但在 Chrome 中无效。

根据 Zikes 的建议，我添加了一些异步，现在它在两种浏览器中都可以使用。

最终答案：

attached: function() {
    this.async(function(){
        var width = this.$.content.scrollWidth;
    },1)
}

Answer 2

另一种方法是在使用它之前 "flush" DOM。在这种情况下，代码将是：

attached: function() {
  var width;
  Polymer.dom.flush();
  width = this.$.content.scrollWidth;
},

由于这是同步的、声明的并且不涉及闭包，因此使用起来会更容易。

更多信息：https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api

domReady 与 ready - 迁移到 Polymer 1.0

domReady vs ready - Migrating to Polymer 1.0

polymer