Firefox上的Polymer.js組件

Question

我在使用Polymer.js的Firefox上遇到問題。

這是我的聚合物元素。

<!-- Imports polymer -->
<link rel="import" href="../../bower_components/polymer/polymer.html">

<!-- Defines element markup -->
<dom-module id="scoreboard-bar">
    ...
    <script>
        Polymer({
            is: 'scoreboard-bar',
            properties: {
                totalCounter: {
                    type: Number,
                    value: 0
                },
            },
            getTotalCounter: function () {
                return this.totalCounter;
            },
            setTotalCounter: function (totalCounter) {
                this.totalCounter = totalCounter;
            },
        });
    </script>
</dom-module>

這是將Polymer組件導入到主要的html文件中：

<head>
    <!-- Imports polyfill -->
    <script src="{% static "polymer/bower_components/webcomponentsjs/webcomponents-lite.min.js" %}">  </script>

    <!-- Imports custom elements -->
    <link rel="import" href="{% static "polymer/components/entity-vibeboard/scoreboard-bar.html" %}">
</head>

要在剛加載的頁面上設置計數器，請執行以下操作：

<body>
    <div>
        <scoreboard-bar id="scoreboardBarFlag"></scoreboard-bar>
    </div>

    <script>
        $( document ).ready(function() {
            var scoreboardBarFlagPolymer = document.querySelector('#scoreboardBarFlag');
            scoreboardBarFlagPolymer.setTotalCounter(10);
        });
    </script>
</body>

這段代碼在Google Chrome上可以正常運行，但是在Firefox上卻無法運行。 我收到的錯誤是：

TypeError: scoreboardBarFlagPolymer.setTotalCounter is not a function

如果在Firebug上添加斷點進行調試，則該功能在Polymer組件上可用，但僅在加載頁面后才可用。

我認為錯誤是因為javascript函數試圖在加載頁面上的Polymer組件之前設置計數器。

知道在頁面上加載所有Polymer組件后如何運行javascript函數嗎？ 僅在Firefox上存在問題，在Chrome上運行正常。

Answer 1

嘗試聽WebComponentsReady 文檔中所述的WebComponentsReady事件

window.addEventListener('WebComponentsReady', function(e) {
  // imports are loaded and elements have been registered
  console.log('Components are ready');
});

Firefox上的Polymer.js組件

問題描述

1 個解決方案

解決方案1
2 已采納 2015-07-22 18:13:46

Firefox上的Polymer.js組件

問題描述

1 個解決方案

解決方案1 2 已采納 2015-07-22 18:13:46

解決方案1
2 已采納 2015-07-22 18:13:46