1

紙の要素で遊んでみたいと思っていますが、フォーム要素の送信に問題があります。以下では：

<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_input.html">
<polymer-element name="c2button-element">
<template>
  <paper-input value="{{myname}}" floatinglabel="true" label="enter your name" on-change="{{nameSubmitted}}"></paper-input>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';


@CustomTag('c2button-element')
class C2Button extends PolymerElement {
  @observable String myname = "Simon";

  void nameSubmitted(Event e, var detail, Node target) {
    print("Being called with event $e for $myname");
  }

  C2Button.created() : super.created();
  @override void attached() { super.enteredView(); }
  @override void detached() { super.leftView(); }
}
</script>
</polymer-element>

入力に必要な動作は、入力を押すenterかぼかしてnameSubmitted毎回呼び出すことです。実際に起こっていることは、 の値を変更した後でのみmyname(私は に登録しているので、それほど驚くべきことではありませんon-change)、発生するイベントを取得しますが、それは2 回発生します! mynameからSimonに変更してEdwinEnter キーを押した後:

Being called with event Instance of 'CustomEvent' for Edwin
Being called with event Instance of 'Event' for Edwin

on-keypressEnterキーの登録やフィルタリングなど、何か他のことをする必要がありますか? これに対する私の最初の試みは、まだ同様の 2 回呼び出された問題に悩まされています。初めてエンターを押すmynameと、紙の入力がまだ新しい値をコミットしていないかのように、古い値がまだ含まれています-これは検証によるものですか?

<paper-input value="{{myname}}" floatinglabel="true" label="enter your name" on-keypress="{{nameSubmitted}}"></paper-input>

void nameSubmitted(KeyboardEvent e, var detail, Node target) {
  if (e.keyCode != 13) {return;}
  print("Being called with event $e for $myname");
}

に変更してEdwinEnterキーを2回押した後：

Being called with event Instance of 'KeyboardEvent' for Simon
Being called with event Instance of 'KeyboardEvent' for Edwin
4

1 に答える 1

0

私にとってうまくいったのは、（上記のように）入力時にフィルタリングし、バインディングをinputValueの代わりに変更することですvalue：

<paper-input inputValue="{{myname}}" floatinglabel="true" label="enter your name" on-keypress="{{nameSubmitted}}"></paper-input>

ただし、このソリューションには満足していません (紙の要素の検証機能を失います) ので、より良い答えを受け入れることは確かです。

于 2014-09-01T15:33:29.330 に答える