如何将任意数据传递给来自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屋!