¿Cómo transfiero datos arbitrarios a una función de controlador de eventos de clic desde un componente web de polímero de Dart?

dart-webui polymer

Question

En la interfaz de usuario web de Dart, fue posible pasar datos arbitrarios para funcionar en respuesta a eventos, por ejemplo, el siguiente fragmento pasa el valor 2 al método de increment(int incBy) en respuesta al evento de clic del botón:

<!-- Web UI -->
<element name="x-click-counter">
  <template>
    <button on-click="increment(2)">  <!-- passing a value of 2 -->
      Click me
    </button>   
  </template>
</element>
<script>
  import ''package:web_ui/web_ui.dart'';

  class CounterComponent extends WebComponent {
    void increment(int incBy) {        // accept the value of 2
      count = count + incBy;
    }
  }
</script>

En Polymer (y Polymer.dart), el atributo de evento de clic requiere una versión de cadena del nombre de la función, en lugar de una llamada a la función real. Esto se describe en la página de documentos de polímeros como:

El valor de un atributo de controlador de eventos es el nombre de cadena de un método en el componente. A diferencia de la sintaxis tradicional, no puede poner código ejecutable en el atributo.

Usando polymer.dart, esto se ve así:

<polymer-element name="x-click-counter">
  <template>
    <button on-click="increment">  <!-- can''t pass a value of 2, as you need to pass a string -->
      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) {  // How do I pass 2 to this function?
      count = count ++;
    }
  }
</script>

Pregunta: ¿Cómo paso un valor arbitrario a la función de increment ?

Answer 1

Dart y Polymer.dart han cambiado desde la respuesta de Chris. Aquí está el código actualizado para 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>

Answer 2

Mi solución para 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

Puede usar los atributos de data- html para pasar datos adicionales y luego acceder a ellos a través del parámetro de target .

data-incby el ejemplo de polímero para agregar un campo de data-incby que toma el valor incrementa el conteo de esta manera:

<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>