2

DartwebComponentのフォームからデータを取得しようとしています。次の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>

それが役立つことを願っています!

(注、上記のコードは dart_web_components のバージョン 0.2.7 で動作します)

于 2012-11-29T22:59:12.840 に答える