domReady vs ready - 迁移到Polymer 1.0

Tyl*_*ler 2 polymer

在Polymer0.5中,我有以下代码:

模板:

<div class="scroll">
    <div class="content">
        <content></content>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

脚本:

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

此代码有效,我收到宽度的非零值.


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

<div class="scroll">
    <div id="content" class="content">
        <content></content>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

现在脚本是:

ready: function() {
    var width = this.$.content.scrollWidth;
}
Run Code Online (Sandbox Code Playgroud)

但是,这个宽度是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>
Run Code Online (Sandbox Code Playgroud)

因此内部文本决定了元素的尺寸.

Tyl*_*ler 6

事实证明我的原始代码在Safari中有效,但在Chrome中却没有.

有了Zikes的建议,我添加了一些异步,现在它适用于两种浏览器.

最终答案:

attached: function() {
    this.async(function(){
        var width = this.$.content.scrollWidth;
    },1)
}
Run Code Online (Sandbox Code Playgroud)