聚合物这个。$ collection

Question

我正在阅读活动指南和指南的开头，它说：

You can also add an event listener to any element in the this.$ collection using the syntax nodeId.eventName.

什么是this.$collection？

Answer 1

this.$ 包含从 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 id is stored on the this.$ hash by id.

Note: Nodes created dynamically using data binding (including those in dom-repeat and dom-if templates) are not added to the this.$ 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>

聚合物这个。$ collection

Polymer this.$ collection

polymer

polymer-1.0