如何将任意数据从 Dart 聚合物 Web 组件传递给单击事件处理函数

Posted 2023-02-23

【中文标题】如何将任意数据从 Dart 聚合物 Web 组件传递给单击事件处理函数

【英文标题】：How do I pass arbitrary data to a click event handler function from a Dart polymer web component

【发布时间】：2013-08-17 10:18:21

【问题描述】：

在 Dart 的 Web UI 中，可以将任意数据传递给函数以响应事件，例如，以下 sn-p 将值 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.dart，如下所示：

<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 函数？

【参考方案1】：

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

重写聚合物示例以添加一个 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>

【讨论】：

@Cengiz 对别人的回答进行实质性更改被认为是不合适的，即使它完全错误。相反，请在您的更改中发布新答案。

【参考方案2】：

自 Chris 回答以来，Dart 和 Polymer.dart 发生了变化。这是 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>

【讨论】：

对于 'data-xxx' 属性 target.dataset 可能是比 target.attributes 更好的选择

我喜欢在 React JSX 中，你可以在 JS 中编写函数调用，而不是像这样的变通方法。

【参考方案3】：

我的聚合物 0.11.0+5 解决方案

元素.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);
  

【讨论】：

你也可以看看我对这个问题的回答***.com/questions/24530054。 Polymer 将项目隐式分配给 <li> 我对链接问题的回答显示了如何获取该值。