javascript - 完整渲染 DOM 的 Polymer 1.0 生命周期事件

Question

背景

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

问题

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

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

代码

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

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

我尝试了什么？

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

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

总结

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

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

抱歉我的英语不好，或者如果我不明白你的问题，我的英语不好。