这是我的聚合物元素：
<link rel="import" href="../polymer/polymer.html"> <script src="bower_components/cytoscape/dist/cytoscape.js"></script> <dom-module id="dependency-graph"> <template> <style> #surface { width: 200px; height: 200px; } </style> <div id="surface"></div> </template> <script> Polymer({ is: 'dependency-graph', ready: function () { var surface = this.$.surface; var cy = cytoscape({ container: surface }); ...运行此操作会在cytoscape中引发异常
return ( _p.sizeCache = _p.sizeCache || ( container ? (function(){ var rect = container.getBoundingClientRect(); var style = window.getComputedStyle( container ); var val = function( name ){ return parseFloat( style.getPropertyValue( name ) ); }; return { width: rect.width - val('padding-left') - val('padding-right') - val('border-left-width') - val('border-right-width'), height: rect.height - val('padding-top') - val('padding-bottom') - val('border-top-width') - val('border-bottom-width') };因为style.getPropertyValue返回"" 。 如果我使用document.body作为容器，它将返回一个数字并且cytoscape工作。 我做错了什么，我该如何解决？
我发现了一篇关于类似问题的文章，但我没有得到它（或者它不起作用？）： webcomponentsjs与使用window.getComputedStyle的第三方脚本不兼容
This is my polymer element:
<link rel="import" href="../polymer/polymer.html"> <script src="bower_components/cytoscape/dist/cytoscape.js"></script> <dom-module id="dependency-graph"> <template> <style> #surface { width: 200px; height: 200px; } </style> <div id="surface"></div> </template> <script> Polymer({ is: 'dependency-graph', ready: function () { var surface = this.$.surface; var cy = cytoscape({ container: surface }); ...Running this throws an exception in cytoscape
return ( _p.sizeCache = _p.sizeCache || ( container ? (function(){ var rect = container.getBoundingClientRect(); var style = window.getComputedStyle( container ); var val = function( name ){ return parseFloat( style.getPropertyValue( name ) ); }; return { width: rect.width - val('padding-left') - val('padding-right') - val('border-left-width') - val('border-right-width'), height: rect.height - val('padding-top') - val('padding-bottom') - val('border-top-width') - val('border-bottom-width') };because style.getPropertyValue returns "". If I use document.body as container it will return a number and cytoscape works. What did I do wrong and how can I fix it?
I found an article about a similar problem but I did not get it (or it did not work?): webcomponentsjs is not compatible with third-party scripts that use window.getComputedStyle
最满意答案
确保在已经在DOM中的元素上调用Cytoscape，并且仅在DOMContentLoaded之后初始化。 如果window.getComputedStyle()不起作用，则至少满足其中一个要求。
I moved my code to the attached: function () { and now it works without any problem. Thx @maxkfranz for the idea.
更多推荐
发布评论