Menu
I'm reading through the events guide and the start of the guide it says:
You can also add an event listener to any element in the this.$ collection using the syntax nodeId.eventName.
What is the this.$ collection?
603
this.$ contains the nodes created from Automatic node finding:
Polymer automatically builds a map of statically created instance nodes in its local DOM, to provide convenient access to frequently used nodes without the need to query for them manually. Any node specified in the element's template with an
idis stored on thethis.$hash byid.Note: Nodes created dynamically using data binding (including those in
dom-repeatanddom-iftemplates) are not added to thethis.$hash. The hash includes only statically created local DOM nodes (that is, the nodes defined in the element's outermost template).
<head>
<base href="https://polygit.org/polymer+1.6.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<div id="div1">foo</div>
<div id="div2">bar</div>
<div id="div3">baz</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
ready: function() {
console.log('div1', this.$.div1.textContent);
console.log('div2', this.$.div2.textContent);
console.log('div3', this.$.div3.textContent);
}
});
});
</script>
</dom-module>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
