techinplanet staffAsked By: Anonymous
This is really bugging me, can’t seem to get this to work and I figure it’s got to be some small little thing I’m overlooking. I am getting this error: Uncaught TypeError: undefined is not a functiontest-index.html:16 (anonymous function)
Here’s code to reproduce, first the element:
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="test-element" >
<template>
<div>YOOOOO</div>
</template>
<script>
Polymer({
loaderup: function(event, detail, sender) {
alert("WAT?")
}
});
</script>
</polymer-element>
And here’s the page that’s trying to load it:
<!doctype html>
<html>
<head>
<title>MyApp</title>
<a href="http://bower_components/webcomponentsjs/webcomponents.min.js">http://bower_components/webcomponentsjs/webcomponents.min.js</a>
<link rel="import" href="test-element.html">
</head>
<body unresolved>
<test-element id="test-el"></test-element>
<script>
var x = document.querySelector("#test-el");
console.log(x);
x.loaderup();
</script>
</body>
</html>
But it gives the error I posted about on x.loaderup(). Any ideas?
Solution
Answered By: Anonymous
You need to wait for the polymer-ready event, because the Polymer element upgrade is performed asynchronously:
<script>
window.addEventListener('polymer-ready', function() {
var x = document.querySelector("#test-el");
console.log(x);
x.loaderup();
});
</script>
