Question

我正在尝试从Dart webComponent中的表单获取数据。定义了以下LoginComponent。单击提交按钮时不会调用doLogin函数。尝试在提交按钮上放置点击处理程序，但这也不起作用。

<html><body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template >
    <form id='loginForm' on-submit='doLogin()'>
        <div>
            <h1>Login :</h1>
            <label for="loginName">Login name</label>
            <input type="text" required="required" data-bind="value:loginId" />
            <label>Password</label>
            <input type="password" required="required" data-bind="value:pwd" />
            <input type='submit' value="Login" />
            <input type='button' data-action="click:doCancel" value="Cancel" />               
            <span>{{errorMessage}}</span></div>
        </div>
    </form>      
</template>

<script type="application/dart">
  import 'package:web_components/web_components.dart';      
  import 'ouremr.dart';  
  import 'dart:html';

  class LoginComponent extends WebComponent {
  String errorMessage=""; 
  String loginId='';
  String pwd='';                     
  }                               

    void doLogin(e) {
    print("in do login");
      e.preventDefault();          
      print(loginId);
      print(pwd);

      }  

    void doCancel(e) {
    e.preventDefault();
      errorMessage=' ';         
      style.display='none';
    }                       
  }           
</script>
</element>
</body></html>

提交表单时不会调用

doLogin函数。试过以下但是也不起作用：

<input type='submit' value="Login" on-click='onLogin()'/>

Answer 1

谢谢你的提问！非常酷，看你玩Dart的Web UI库。

我清理了你的代码，并通过一些调整，它可以工作！

将doLogin等处理程序放入LoginComponent类
模板中有额外的</div>
将$event添加到您的点击表达式

请参阅此处获取代码：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>login_page</title>
    <link rel="components" href="login_form.html">
  </head>
  <body>
    <h1>login_page</h1>

    <x-login></x-login>

    <script type="application/dart">main() {}</script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

和

<!DOCTYPE html>
<html><body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template >
    <form id='loginForm' on-submit='doLogin($event)'>
        <div>
            <h1>Login :</h1>
            <label for="loginName">Login name</label>
            <input type="text" required="required" data-bind="value:loginId" />
            <label>Password</label>
            <input type="password" required="required" data-bind="value:pwd" />
            <input type='submit' value="Login" />
            <input type='button' on-click="doCancel($event)" value="Cancel" />               
            <span>{{errorMessage}}</span>
        </div>
    </form>      
</template>

<script type="application/dart">
  import 'package:web_components/web_components.dart'; 
  import 'dart:html';

  class LoginComponent extends WebComponent {
   String errorMessage=""; 
   String loginId='';
   String pwd=''; 

    void doLogin(Event e) {
      print("in do login");
      e.preventDefault();          
      print(loginId);
      print(pwd);
    }  

    void doCancel(Event e) {
      e.preventDefault();
      errorMessage=' ';         
      style.display='none';
    }                       
  }          
</script>
</element>
</body></html>

希望有所帮助！

（注意，上面的代码适用于dart_web_components的0.2.7版本）

从Dart WebComponent中的表单获取数据

1 个答案: