如何将任意数据传递给来自Dart聚合物web组件的点击事件处理函数 [英] How do I pass arbitrary data to a click event handler function from a Dart polymer web component

问题描述

在Dart的Web UI中，可以将任意数据传递到函数以响应事件，例如，以下代码段将值 2 传递到 increment（int incBy）方法响应按钮的点击事件：

 <！ -  Web UI  - > 
< element name =x-click-counter> 
< template> 
< button on-click =increment（2）> <！ - 传递值2  - > 
点击我
< / button> 
< / template> 
< / element> 
< script> 
 import'package：web_ui / web_ui.dart'; 
 
类CounterComponent extends WebComponent {
 void increment（int incBy）{//接受值2 
 count = count + incBy; 
} 
} 
< / script> 
  

在Polymer（和Polymer.dart）中，点击事件属性需要一个字符串版本的函数名，而不是实际的函数调用。这在聚合物文档页上被描述为：

事件处理程序属性的值是组件上方法
的字符串名称。与传统语法不同，您不能将可执行
代码放在属性中。

使用polymer.dart， / p>

 < polymer-element name =x-click-counter> 
< template> 
< button on-click =increment> <！ - 不能传递值2，因为你需要传递一个字符串 - > 
点击我
< / button> 
< / template> 
< / polymer-element> 
< script> 
 import'package：polymer / polymer.dart'; 
 
 @CustomTag（x-click-counter）
类CounterComponent使用ObservableMixin扩展PolymerElement {
 @observable int count = 0; 
 
 void increment（Event event，var detail，var target）{//如何传递2给这个函数？ 
 count = count ++; 
} 
} 
< / script>问题：如何将任意值传递给 increment 
你可以使用html  data  -    属性传递额外数据，然后通过 target 参数访问它们。
 
 
 
重写聚合物示例添加一个 data-incby 字段，使值递增计数，如下所示：
 < polymer-element name =x-click-counter> 
< template> 
< button on-click =incrementdata-incby =2> <！ - 现在将值传递为数据属性 - > 
点击我
< / button> 
< / template> 
< / polymer-element> 
< script> 
 import'package：polymer / polymer.dart'; 
 
 @CustomTag（x-click-counter）
类CounterComponent使用ObservableMixin扩展PolymerElement {
 @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> 
  
 
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 increment(int incBy) method in response to the button's on-click event:
<!-- 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>
In Polymer (and Polymer.dart), the on-click event attribute requires a string version of the function name, rather than an actual function call.  This is described on the polymer docs page as:

  
The value of an event handler attribute is the string name of a method
  on the component. Unlike traditional syntax, you cannot put executable
  code in the attribute.
Using polymer.dart, this looks like:
<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>
Question: How do I pass an arbitrary value to the increment function?
解决方案
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>


                        
这篇关于如何将任意数据传递给来自Dart聚合物web组件的点击事件处理函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！