【问题标题】:Is there an equivalent to on-submit for paper-input?是否有相当于提交纸质输入的方法?
【发布时间】:2014-08-29 18:58:53
【问题描述】:

我很高兴开始使用纸质元素,但我在提交表单元素时遇到了一些问题。如下:

<!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),我才会触发一个事件,但它会触发 两次!将mynameSimon 更改为Edwin 并按回车后:

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

我是否需要做其他事情,比如注册on-keypress 并过滤回车键?我对此的第一次尝试仍然遇到类似的两次调用问题。我第一次按 Enter 时,myname 仍然包含旧值,好像 paper-input 还没有提交新值 - 这是由于验证吗?

<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 

【问题讨论】:

    标签: dart polymer dart-polymer material-design


    【解决方案1】:

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

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

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

    【讨论】:

      猜你喜欢
      • 2015-03-14
      • 2011-09-19
      • 2015-02-27
      • 1970-01-01
      • 1970-01-01
      • 2011-03-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多