Templates Dojo小部件模板
关于/-有一点我不明白。关于phusick的示例,login dialog类调用dom.byId(“dialog template”)-“dialog template”是脚本中的id,脚本是对话框的模板,应该出现在html模板中,而不是主html中。因此,如果我删除它,对dom.byId的调用将失败 所以我的代码结构如下Templates Dojo小部件模板,templates,dojo,widget,Templates,Dojo,Widget,关于/-有一点我不明白。关于phusick的示例,login dialog类调用dom.byId(“dialog template”)-“dialog template”是脚本中的id,脚本是对话框的模板,应该出现在html模板中,而不是主html中。因此,如果我删除它,对dom.byId的调用将失败 所以我的代码结构如下 <script type="text/template" id="dialog-template"> <div st
<script type="text/template" id="dialog-template">
<div style="width:300px;">
<div class="dijitDialogPaneContentArea">
<div data-dojo-attach-point="contentNode">
{form}
</div>
</div>
<div class="dijitDialogPaneActionBar">
<div
class="message"
data-dojo-attach-point="messageNode"
></div>
<button
data-dojo-type="dijit.form.Button"
data-dojo-props=""
data-dojo-attach-point="submitButton"
>
OK
</button>
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="cancelButton"
>
Cancel
</button>
</div>
</div>
</script>
main.html(仅调用main.js-仅此而已)
main.js(包含以下内容)
现在LoginDialog.js和LoginDialogTemplate.html是对话框的模板化小部件
LoginController.js是控制器
我的LoginDialog.js是
define([
"dojo/_base/declare","dojo/_base/lang","dojo/on","dojo/dom","dojo/Evented","dojo/_base/Deferred","dojo/json",
"dijit/_Widget","dijit/_TemplatedMixin","dijit/_WidgetsInTemplateMixin",
"dijit/Dialog","dijit/form/Form","dijit/form/ValidationTextBox","dijit/form/Button",
"dojo/text!templates/loginDialogTemplate.html",
"dojo/text!templates/loginFormTemplate.html",
"dojo/domReady!"
], function(
declare,lang,on,dom,Evented,Deferred,JSON,
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
Dialog,
Form,
Button,
template
) {
return 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");
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.set("message", "Login sucessful.");
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);
}
});
});
我的loginDialogTemplate.html如下
<script type="text/template" id="dialog-template">
<div style="width:300px;">
<div class="dijitDialogPaneContentArea">
<div data-dojo-attach-point="contentNode">
{form}
</div>
</div>
<div class="dijitDialogPaneActionBar">
<div
class="message"
data-dojo-attach-point="messageNode"
></div>
<button
data-dojo-type="dijit.form.Button"
data-dojo-props=""
data-dojo-attach-point="submitButton"
>
OK
</button>
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="cancelButton"
>
Cancel
</button>
</div>
</div>
</script>
{form}
好啊
取消
由于模板具有id=“dialog template”,所以我猜当小部件调用dom.byId(“dialog template”)时,它会在以下行抛出一个错误:“TypeError:dom.byId(…)为null:->var dialogTemplate=dom.byId(“dialog template”).textContent
那么我做错了什么
如果我在主html中使用所有模板脚本,它就可以正常工作。Asif
由于您在define函数中传递模板,因此不需要dom.byId()来获取内容。试试这个:
从HTML模板中删除元素
在LoginDialog.js中,将函数参数更改为:
...
Button,
dialogTemplate,
formTemplate
下一次更改将需要formTemplate。我使用了“dialogTemplate”而不是您的“template”,因此更明显的是它如何替换示例中的代码。接下来,将构造函数的开头更改为:
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(
...
我只留下了注释代码,以便您可以看到我更改了什么。它所做的是通过用传入的formTemplate替换dialogTemplate HTML中的{form}占位符来创建一个名为“template”的新模板字符串。然后,它使用新的模板字符串来创建小部件。谢谢,我还没有尝试过它-考虑改用GWT(给Vaadin一个驱动器),但GWT似乎适合我的开发需要。