我在 Firefox 上使用 Polymer.js 时遇到问题。
这是我的 polymer 元素。
<!-- 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 上运行正常。
最佳答案
尝试按所述监听 WebComponentsReady 事件 in the documentation of webcomponents.js
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
console.log('Components are ready');
});
关于javascript - Firefox 上的 Polymer.js 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31569251/