完整渲染DOM的聚合物1.0生命周期事件

Polymer 1.0 Lifecycle Event for Complete Rendered DOM

本文关键字：生命 周期 事件 聚合物 DOM      更新时间：2023-09-26

背景

我已经在Polymer公司工作了一段时间。我一直在从.5进行转换，并为生产应用程序构建新元素。我们目前使用的是Polymer 1.0.6，这个问题也使用jQuery 2.x.x和typeahead.js.

问题

我们有一个元素，它构建了一个由数据源提供的标签和输入的动态列表。在ready函数中，我们获得一个输入数据列表，并将其设置为一个本地列表变量，该变量绑定到foreach模板以创建标签和输入。

我找不到一个我真正喜欢的聚合物元素，用于打字，聚合物1.0。所以我默认使用typeahead.js。我的问题是，我找不到一个生命周期事件或解决方法，在dom处理完ready函数中的绑定列表设置后，调用typeahead函数。

代码

演示这个问题的最简单方法是在jsbin中创建一个严重的精简版本。我知道这个元素看起来很糟糕，为了演示我面临的核心问题，它被尽可能地减少了。

http://jsbin.com/zivano/edit?html，输出

我试过什么

我已经尝试使用附加的事件，虽然它在ready函数之后进行处理，但从ready开始的dom更改尚未生效。我在SO domReady vs ready-迁移到Polymer 1.0上发现了类似的问题。我尝试了这两个建议，第二个仍然在jsbin中使用，但没有成功。

我还将输入的点击事件绑定到了一个调用typeahead设置代码的函数，以证明如果在呈现dom之后进行调用，它将正确工作。

摘要

如果在ready函数中更新一个数据绑定的本地变量，我是否可以调用一个生命周期事件来保证这些dom更改将被呈现，这样我就可以对这些新项进行dom查询？或者，是否有一种解决方案可以让我在元素dom完全渲染后一次调用dom元素上的js函数？

我的问题是找不到生命周期事件或解决方法在dom处理完设置ready函数中的绑定列表。

我想我遇到了这样的问题。对于我的问题，我使用以下方法找到了解决方案：

var self = this;
window.addEventListener('WebComponentsReady', function(e) {
    // imports are loaded and elements have been registered
   /*Example*/
    console.log('Components are ready');
    var p = self.getElementsByTagName("paper-item");//paper-item created dynamically
    console.log(p);//can access and use this paper-item 
   /*Finish example*/
   //here you can call typeahead because the dom has been processed
});

对不起我的英语，或者如果我听不懂你的问题，我的英语不好。

我遇到的问题是，数据绑定列表是通过ajax函数填充的，该函数在附加函数之后完成，即使我在附加函数内部进行异步调用，它仍然会因为竞争条件而失败。

值得注意的是，弗拉维奥·奥乔亚的回答会奏效。我个人倾向于不让我的自定义元素向Window添加监听器。所以我走了另一条路。

由于我的问题是以保证绑定列表得到更新为前提的，所以我将ajax调用封装在Promise中，并将typeahead init逻辑添加到then语句中。这个解决方案似乎正在发挥作用。

我确实担心promise是否可以保证在处理then语句时绑定列表将传播到DOM。但到目前为止，它一直在发挥作用。如果我能证明不是这样的话，我会编辑这个答案。

相关文章：