Question

这是我的聚合物元素：

<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 is not compatible with third-party scripts that use window.getComputedStyle

Answer 1

确保在已经在DOM中的元素上调用Cytoscape，并且仅在<ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="Exercises" tabIcon="body"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Analytics" tabIcon="analytics"></ion-tab> </ion-tabs>之后初始化。如果DOMContentLoaded无效，则至少满足其中一项要求。

Answer 2

我将代码移到了attached: function () {，现在它的工作没有任何问题。感谢@maxkfranz。

如何在聚合物元素中使用cytoscape？

2 个答案: