domReady vs准备就绪-迁移到Polymer 1.0 [英] domReady vs ready - Migrating to Polymer 1.0

问题描述

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

In Polymer0.5, I had the following code:

模板:

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

脚本:

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

此代码有效，并且我收到的宽度值非零.

This code worked, and I received a non-zero value for the width.

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

Now I am trying to migrate to Polymer1.0, I added an ID to the div:

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

现在脚本是:

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

但是，此宽度为0.

旧的domReady函数和新的ready函数之间是否有区别?我也尝试过使用attached函数，但是它也不起作用.

Is there a difference between the old domReady function, and the new ready function? I have also tried using the attached function but it did not work either.

稍后当我尝试访问width(通过按按钮触发)时，我得到的是我要查找的非零值.

When I try to access the width later on (triggered by a button press), then I get the non-zero value I am looking for.

该元素的用法如下:

<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>

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

So that inner text is what determines the dimensions of the element.

推荐答案

原来，我的原始代码在Safari中可用，但在Chrome中不可用.

It turns out that my original code was working in Safari, but not in Chrome.

根据 Zikes 的建议，我添加了一些异步功能，现在它在两种浏览器中均可使用.

With Zikes suggestion, I added in some async, and now it works in both browsers.

最终答案:

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

这篇关于domReady vs准备就绪-迁移到Polymer 1.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！