有没有关于如何实现一个简单的登录页面/对话框的例子？我一直在尝试使用 dojo 样板来做到这一点（检查我之前的问题：Dojo MVC 的布局实现）。到目前为止，我已经能够显示我的对话框。但我希望能够获取我的数据，并且在点击事件时希望有一个警报框（例如他的内容）。
我的观点：
<form action="Login" method="post" validate="true" id="loginForm">
<table width="258">
<tr>
<td><label>Login</label></td>
<td><input class="cell" type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"/></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input class="cell" type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td colspan="2" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="connect">Ok</button></td>
<td align="left" valign="top"><button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" id="Cancel">Cancel</button></td>
<td><button dojoType="dijit.form.Button" type="submit" onclick="showDialog();" id="resetPassword"> Show Dialog </button></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
我的小部件模块/类
define([
"dojo/_base/declare",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!app/views/Login/Login.html",
"dijit/Dialog",
"dijit/form/Button",
"dijit/form/TextBox"
], function(
declare,
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
template,
Dialog
){
return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, Dialog], {
templateString: template
});
});
现在，如果您检查 HTML 元素 id LoginButton 在这种情况下应该调用“连接”函数。哪个应该显示（在警报框中）用户名和密码当前输入。
我把我的功能放在哪里？有点儿...
connect : function(){
alert("username :" + dom.byId("userId").value()
+ " Password: " + dom.byId("password").value());
}
编辑：新代码
define([
"dojo/_base/declare",
"dijit/_Widget",
"dojo/dom",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!app/views/Login/Login.html",
"dijit/Dialog",
"dijit/form/Button",
"dijit/form/TextBox"
], function(
declare,
dom,
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
template,
Dialog
){
return declare("login", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, Dialog], {
templateString: template,
postCreate: function() {
this.inherited(arguments);
// make reference to widget from the node attachment
this.submitButton = dijit.getEnclosingWidget(this.submitButtonNode);
// override its onSubmit
this.submitButton.onClick = function(){
alert("username :" + dom.byId("userId").value()
+ " Password: " + dom.byId("password").value());
};
},
// and a sample on how to implement widget-in-template stateful get/setter pattern
// e.g. if submitbutton label should change on some event, call as such:
// dijit.byId('loginForm').set("submitLabel", "Sendin login, please wait");
_setSubmitLabelAttr : function(value) {
return this.submitButton.set("label", value);
},
_getSubmitLabelAttr : function() {
return this.submitButton.get("label");
},
});
});
我的 main.js：
define([ 'dojo/has', 'require', 'dojo/_base/sniff'], function (has, require) {
var app = {};
if (has('host-browser')) {
require([ './views/Login', 'dojo/domReady!' ], function (Login) {
app.login = new Login().placeAt(document.body);
app.login.startup();
// And now…
app.login.show();
});
}
else {
console.log('Hello from the server!');
}
});