在Dart的Web UI中,可以向函数传递任意数据以响应事件,例如,以下代码段将值2传递给increment(int incBy)方法以响应按钮的点击事件:

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

在Polymer(和Polymer.dart)中,单击事件属性需要函数名的字符串版本,而不是实际的函数调用.这在polymer docs page上被描述为:

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

使用polymer .达特,这看起来像:

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

问:如何将任意值传递给increment函数?

推荐答案

您可以使用html data-属性传递额外数据,然后通过target参数访问它们.

重新编写polymer示例以添加一个data-incby字段,该字段采用计数的值增量,如下所示:

<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相关问答推荐

如何在流侦听器中对异步函数调用进行单元测试

Dart JavaScript 与 jQuery 的互操作回调

如何在 Dart 中创建一个空 Set

在 Windows 10 中使用 Android Studio 时没有Remove Widget选项

表单的 TextFormField 中的多个光标(cursor)

使用where在对象列表中搜索 dart 中的特定对象

在Flutter 中使用 import 'dart:html' - 我需要额外的依赖项吗?

Expansion Panel底部溢出

如何在Dart中测试流

将DateTime转换为ISO 8601

如何更改Flatter DevTools的默认浏览器?

Flutter 中 ListView.builder 中的反向列表

在 Dart 中修改类内的最终字段

Dart 语法高亮不是高亮 dart 代码

在 Dart 中调用异步函数而不等待,例如启动一个线程

如何从 JavaScript 调用 Dart 函数

dart - 数字格式

从 Dart 应用访问 pubspec.yaml 属性

如何在 Dart 中扩展列表?

如何在dart中生成随机字符串?