Event handlers within x-repeat always target the first instance of an element

[tbuckley]

There is a bug with registering handlers inside x-repeats that exists in Polymer 0.8.0-rc.2. All handlers inside the template will refer to the first instance of the element containing the template instead of the correct instance. This looks to be fixed in the latest 0.8 branches, but I want to make sure that future release candidates will work correctly.

In templatizer.html, the "templatize" function is only run once per template. Therefore this code:

archetype.listen = function() { 
    this.listen.apply(this, arguments);
}.bind(this.host);

Will only be run once, and so this.host will always refer to the first instance of the element that contains the template. A quick fix is to simply refer to the host within the function:

archetype.listen = function() { 
    this.host.listen.apply(this.host, arguments);
};

The example below attempts to show the problem. x-bar contains a template with a button that will call handleTap when pressed. x-foo contains two instances of x-bar, and regardless of which button is pushed, the this in handleTap will always refer to the first x-bar, x-bar#bar1.

<dom-element id="x-foo">
  <template>
    <x-bar id="bar1"></x-bar>
    <x-bar id="bar2"></x-bar> <!-- `this` inside handleTap will refer to #bar1 -->
  </template>
</dom-element>

<dom-element id="x-bar">
  <template>
    <template is="x-repeat" items="{{items}}">
      <button on-tap="handleTap">{{item}}</button>
    </template>
  </template>
</dom-element>

[kevinpschaaf]

Fixed on master.