19

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) では、on-click イベント属性には、実際の関数呼び出しではなく、文字列バージョンの関数名が必要です。これは、ポリマーのドキュメント ページで次のように説明されています。

イベント ハンドラー属性の値は、コンポーネントのメソッドの文字列名です。従来の構文とは異なり、実行可能コードを属性に入れることはできません。

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ですか?

4

3 に答える 3

19

htmldata-属性を使用して追加のデータを渡し、パラメーターを介してそれらにアクセスでき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>
于 2013-08-15T08:39:33.807 に答える
1

Polymer 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);
  }
}
于 2014-07-11T14:03:40.807 に答える