javascript - Polymer.js components on Firefox -
i having problem on firefox polymer.js.
this polymer element.
<!-- 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>
this import of polymer component main html file:
<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>
to set counter on load page have:
<body> <div> <scoreboard-bar id="scoreboardbarflag"></scoreboard-bar> </div> <script> $( document ).ready(function() { var scoreboardbarflagpolymer = document.queryselector('#scoreboardbarflag'); scoreboardbarflagpolymer.settotalcounter(10); }); </script> </body>
this code working on google chrome, it's not working on firefox. error receiving is:
typeerror: scoreboardbarflagpolymer.settotalcounter not function
if add breakpoint on firebug, doing debug, function available on polymer component, it's not available after load page.
i think error it's because javascript function trying set counter before load polymer component on page.
any idea how can run javascript function after load polymer components on page? issue it's on firefox, on chrome it's working fine.
try listening webcomponentsready
event described in documentation of webcomponents.js
window.addeventlistener('webcomponentsready', function(e) { // imports loaded , elements have been registered console.log('components ready'); });
Comments
Post a Comment