polymer - domReady 与 Ready - 迁移到 Polymer 1.0

标签 polymer

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

模板:

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

脚本:

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

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

<小时/>

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

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

现在的脚本是:

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

但是,这个宽度是0

<小时/>

旧的 domReady 函数和新的 ready 函数之间有区别吗?我也尝试过使用 attached 函数,但它也不起作用。

当我稍后尝试访问宽度(通过按下按钮触发)时,我会得到我正在寻找的非零值。

<小时/>

该元素的使用方式如下:

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

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

最佳答案

事实证明,我的原始代码可以在 Safari 中运行,但不能在 Chrome 中运行。

Zikes建议,我添加了一些异步,现在它可以在两种浏览器中运行。

最终答案:

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

关于polymer - domReady 与 Ready - 迁移到 Polymer 1.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30607541/

相关文章:

javascript - 使用 Interactive.js/shadowDOM 选择器可拖动 polymer

javascript - 如何在 polymer 重复属性中使用 JSON 对象?

polymer - 如何使用Polymer web-component-tester进行特定测试?

javascript - 如何调用其他元素的方法?

polymer - 属性应该传递对象吗?

dart - 安装核心元素和 polymer UI元素时出错

javascript - Polymer Project 加载缓慢

node.js - 当我运行应用程序时,我的本地服务器找不到 Bower 文件

javascript - 移动通信大会 : how to rerender on URL change

google-app-engine - Google Cloud Platform 上的 Polymer 初学者工具包 - 操作方法