簡単なログインページ/ダイアログを実装する方法の例はありますか？私は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!');
}
});