Question

我很高兴开始玩纸质元素，但我在提交表单元素方面遇到了一些问题。在以下内容中：

<!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），我是否会触发事件，但它发射两次！将myname从Simon更改为Edwin并按Enter：

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

我是否需要执行其他操作，例如注册on-keypress并过滤输入密钥？我对此的第一次尝试仍然遭遇类似的被叫两次问题。我第一次按回车键时，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");
}

更改为Edwin并按两次输入后

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

Answer 1

对我有用的是过滤输入（如上所述）并将我的绑定更改为inputValue而不是value：

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

我对这个解决方案不满意（我失去了纸质元素的验证功能）所以我当然愿意接受更好的答案。

是否有相当于提交纸张输入？

1 个答案: