2

我正在尝试从 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()'/>
4

1 回答 1

5

谢谢你的提问！看到你在玩 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>

希望有帮助！

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

于 2012-11-29T22:59:12.840 回答