完成渲染的 Polymer 1.0 生命周期事件 DOM

Question

背景

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

问题

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

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

代码

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

http://jsbin.com/zivano/edit?html,output

我尝试了什么？

我试过使用附加事件，虽然它确实在就绪函数之后进行处理，但 dom 对就绪的更改尚未生效。我在 SO 上发现了类似的问题我已经尝试了两个建议，第二个仍在 jsbin 中使用，但没有成功。

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

总结

如果更新数据绑定，就绪函数中的局部变量，是否有一个我可以调用的生命周期事件将保证那些 dom 更改将被呈现，所以我可以做一个 dom 查询那些新项目？或者是否有一种解决方法可以让我在 dom 元素上调用一个 js 函数，一次在元素 dom 完全呈现之后？

Answer 1

my problem is that I cannot find a lifecycle event or workaround, to call the typeahead function after the dom has processed setting the bound list in the ready function.

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

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
});

对不起我的英语，如果我不明白你的问题，我的英语不好。

Answer 2

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

值得注意的是 Flavio Ochoa 的回答，将会奏效。我个人更喜欢不让我的自定义元素向 Window 添加侦听器。所以我走了另一条路。

由于我的问题是基于保证更新绑定列表，我将 ajax 调用包装在 Promise 中，并将预输入初始化逻辑添加到 then 语句。该解决方案似乎有效。

我确实担心承诺是否可以保证在处理 then 语句时绑定列表已经传播到 DOM。但到目前为止，它一直有效。如果我能证明不是，我会编辑这个答案。

完成渲染的 Polymer 1.0 生命周期事件 DOM

Polymer 1.0 Lifecycle Event for Complete Rendered DOM

html

javascript

jquery

polymer

polymer-1.0

背景

问题

代码

我尝试了什么？

总结