1

I'm excited to start playing with paper elements, but I'm having some problems with form element submissions. In the following:

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

The behavior I want for the input is for pressing enter or blurring the input to call nameSubmitted every time. What's actually happening is, only after changing the value of myname (which is not that surprising, since I've registered to on-change), do I get an event to fire, but it fires twice! After changing myname from Simon to Edwin and pressing enter:

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

Do I need to do something else, like register on-keypress and filter for the enter key? My first attempt at this still suffers from a similar called-twice problem. The first time I press enter, myname still contains the old value, as though paper-input hasn't committed the new value yet - is this due to validation?

<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");
}

After changing to Edwin and pressing enter twice:

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