首页 文章

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

提问于
浏览 次
1

背景

我和Polymer一起工作了一段时间 . 我一直在转换.5并为 生产环境 应用程序构建新元素 . 我们目前正在使用Polymer 1.0.6，这个特殊问题也在使用jQuery 2.x.x和typeahead.js .

问题

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

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

代码

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

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

我尝试过什么？

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

我还将输入的click事件绑定到调用typeahead设置代码的函数，以证明如果在渲染dom之后进行调用它将正常工作 .

摘要

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

javascript jquery html polymer polymer-1.0

2 回答

  • 1

    我的问题是我找不到生命周期事件或变通方法，在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
});

    对不起我的英语，或者如果我不理解你的问题，我的英语很糟糕 .

    回复于
  • 1

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

    值得注意的是Flavio Ochoa的回答，会有效 . 我个人倾向于没有我的自定义元素向Window添加监听器 . 所以我走了另一条路 .

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

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

    回复于

相关问题