How do I pass arbitrary data to a click event handler function from a Dart polymer web component

Question

In Dart\'s Web UI, it was possible to pass arbitrary data to function in response to events, for example, the following snippet passes the value 2 to the

Answer 1

You can use html data- attributes to pass extra data, and then access them through the target parameter.

Re-writing the polymer example to add a data-incby field that takes the value increment the count by looks like this:

<polymer-element name="x-click-counter">
  <template>
    <button on-click="increment"  data-incby="2">  <!-- now passing the value as a data attribute -->
      Click Me
    </button>
  </template>
</polymer-element>
<script>
  import 'package:polymer/polymer.dart';

  @CustomTag("x-click-counter")
  class CounterComponent extends PolymerElement with ObservableMixin {
    @observable int count = 0;

    void increment(Event event, var detail, var target) {
      int incBy = int.parse(target.attributes['data-incby']);  // extract the value 2
      count = count + incBy;
    }
  }
</script>

Answer 2

My solution for Polymer 0.11.0+5

element.html

<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="dp-element">
  <template>
    <div class="row">
    <ul>
      <template repeat="{{ item in items }}">
        <li on-click="{{load}}" data-incby="{{item}}">{{ item }}</li>
      </template>
    </ul>

  </template>

 <script type="application/dart">
  import 'package:polymer/polymer.dart';
  import 'view.dart';
  import 'dart:html';

  @CustomTag('dp-element')
  class DpElement extends PolymerElement {

  @observable List<String> items;

  DpElement.created() : super.created(){
  }
  void load(Event event, var detail, var target) {
     String incBy = target.attributes['data-incby'];
     print(incBy);
  }
}

Answer 3

Dart and Polymer.dart have changed since Chris' answer. Here is updated code for Dart v1.0:

<polymer-element name="x-click-counter">
  <template>
    <button on-click="{{increment}}"  data-incby="2">  <!-- now passing the value as a data attribute -->
      Click Me
    </button>
    <span>{{count}}</span>
  </template>
</polymer-element>
<script type="application/dart">
  import 'package:polymer/polymer.dart';
  import 'dart:html';

  @CustomTag("x-click-counter")
  class CounterComponent extends PolymerElement {
    @observable int count = 0;

    CounterComponent.created() : super.created();

    void increment(Event event, var detail, var target) {
      int incBy = int.parse(target.attributes['data-incby']);  // extract the value 2
      count = count + incBy;
    }
  }
</script>