有没有关于如何实现简单登录页面/对话框的示例?我一直在尝试用 dojo 样板来做(查看我之前的问题:Layout implementation for 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!');
}
});
最佳答案
我想添加我的解决方案:http://jsfiddle.net/phusick/tG8Sg/
由于 jsFiddle 的限制,它有点扭曲,但主要原则与我在编码中采用的相同。
首先,登录过程(或任何其他表单处理)被封装在对话框中,它与应用程序的其余部分进行通信,以为通过 dojo/Evented
发出事件。 .这是它的工作原理:
var loginDialog = new LoginDialog({ controller: loginController});
loginDialog.startup();
loginDialog.show();
loginDialog.on("cancel", function() {
console.log("Login cancelled.");
});
loginDialog.on("error", function() {
console.log("Login error.");
});
loginDialog.on("success", function() {
console.log("Login success.");
console.log(JSON.stringify(this.form.get("value")));
});
正如您在 jsFiddle 中所见,我在 LoginDialog
中组装了两个模板 dialog-template 和 login-form-template构造函数。原因是我通常也会有一个类包装 dijit/form/Form
做一些超出标准的魔法dijit/form/Form
验证和数据序列化,但由于登录很简单,而且在 jsFiddle 的单个文件中会很乱,所以我摆脱了它。将表单与对话框分开的优点是您可以在其他地方使用相同的表单(即 View)和所有表单临时代码,例如在ContentPane
.表单只是用来向用户显示和收集数据,它不应该直接与 Model 通信,即网络服务,有一个 Controller 用于此目的:
var LoginController = declare(null, {
constructor: function(kwArgs) {
lang.mixin(this, kwArgs);
},
login: function(data) {
// simulate calling web service for authentication
var def = new Deferred();
setTimeout(lang.hitch(this, function() {
def.resolve(data.username == this.username && data.password == this.password);
}), 1000);
return def;
}
});
创建 LoginController
的实例:
// provide username & password in the constructor
// since we do not have web service here to authenticate against
var loginController = new LoginController({username: "user", password: "user"});
并将其传递给 LoginDialog
构造函数如上所示:
var loginDialog = new LoginDialog({ controller: loginController});
最后LoginDialog
类:
var LoginDialog = declare([Dialog, Evented], {
READY: 0,
BUSY: 1,
title: "Login Dialog",
message: "",
busyLabel: "Working...",
// Binding property values to DOM nodes in templates
// see: http://www.enterprisedojo.com/2010/10/02/lessons-in-widgetry-binding-property-values-to-dom-nodes-in-templates/
attributeMap: lang.delegate(dijit._Widget.prototype.attributeMap, {
message: {
node: "messageNode",
type: "innerHTML"
}
}),
constructor: function(/*Object*/ kwArgs) {
lang.mixin(this, kwArgs);
var dialogTemplate = dom.byId("dialog-template").textContent;
var formTemplate = dom.byId("login-form-template").textContent;
var template = lang.replace(dialogTemplate, {
form: formTemplate
});
var contentWidget = new (declare(
[_Widget, _TemplatedMixin, _WidgetsInTemplateMixin],
{
templateString: template
}
));
contentWidget.startup();
var content = this.content = contentWidget;
this.form = content.form;
// shortcuts
this.submitButton = content.submitButton;
this.cancelButton = content.cancelButton;
this.messageNode = content.messageNode;
},
postCreate: function() {
this.inherited(arguments);
this.readyState= this.READY;
this.okLabel = this.submitButton.get("label");
this.connect(this.submitButton, "onClick", "onSubmit");
this.connect(this.cancelButton, "onClick", "onCancel");
this.watch("readyState", lang.hitch(this, "_onReadyStateChange"));
this.form.watch("state", lang.hitch(this, "_onValidStateChange"));
this._onValidStateChange();
},
onSubmit: function() {
this.set("readyState", this.BUSY);
this.set("message", "");
var data = this.form.get("value");
// ask the controller to login
var auth = this.controller.login(data);
Deferred.when(auth, lang.hitch(this, function(loginSuccess) {
if (loginSuccess === true) {
this.onLoginSuccess();
return;
}
this.onLoginError();
}));
},
onLoginSuccess: function() {
this.set("readyState", this.READY);
this.emit("success");
},
onLoginError: function() {
this.set("readyState", this.READY);
this.set("message", "Please try again.");
this.emit("error");
},
onCancel: function() {
this.emit("cancel");
},
_onValidStateChange: function() {
this.submitButton.set("disabled", !!this.form.get("state").length);
},
_onReadyStateChange: function() {
var isBusy = this.get("readyState") == this.BUSY;
this.submitButton.set("label", isBusy ? this.busyLabel : this.okLabel);
this.submitButton.set("disabled", isBusy);
}
});
请参阅上述 jsFiddle 处的模板.它们应该在单独的文件中 required
通过dojo/text!
通常情况下。我把它们放入 <script type="text/template">
以适应 jsFiddle。
关于javascript - Dojo MVC 的简单登录实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10984855/