gpt4 book ai didi

forms - 从 Dart WebComponent 中的表单获取数据

转载 作者:行者123 更新时间:2023-12-03 02:50:11 26 4
gpt4 key购买 nike

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

最佳答案

谢谢提问!看到您使用 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 版本)

关于forms - 从 Dart WebComponent 中的表单获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13634931/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com