解决方法
描述未解析属性的
documentation清除了其中一些属性.
虽然将未解决的问题应用于< body>元素,导致整个页面的内容被隐藏,直到Polymer准备好,它可以应用于任何元素.例如,您可以使用< div unresolved>作为依赖于Polymer的页面部分的包装器,并创建一个在该包装器外部的加载消息,该消息将立即可见. (然后你想要听取聚合物就绪事件并在触发时隐藏你的加载信息.)
下面是一个使用一种非常人为的方法来减缓Polymer元素完成其生命周期方法(live demo)所需的时间的示例:
<!DOCTYPE html> <html> <head> <Meta charset=utf-8 /> <title>Polymer Demo</title> <style> .hidden { display: none; } </style> </head> <body> <p id="spinner">Loading...</p> <script src="http://www.polymer-project.org/platform.js"></script> <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> <polymer-element name="slow-poke"> <template> <h1><content></content></h1> </template> <script> Polymer({ // Used to introduce a delay in initializing the Polymer element. // Don't try this at home! created: function() { var start = Date.now(); while (true) { if (Date.now() - start > 1000) { break; } } } }); </script> </polymer-element> <div unresolved> <slow-poke>Here I am... finally!</slow-poke> <slow-poke>Me too!</slow-poke> </div> <script> window.addEventListener('polymer-ready',function() { document.querySelector('#spinner').classList.add('hidden'); }); </script> </body> </html>
(顺便说一句,你发现什么是慢速加载?如果它是标准/核心元素,可能值得在GitHub上针对相应项目提交错误.)