1
我正在使用dojo-1.9.1,我正在擴展一個小部件,我必須將<tr>
節點添加到繼承的templateString中的表中。該節點已插入但變量未被替換。有人可以看看下面的來源並指出實施過程中出現了什麼問題。順便說一句,這是我第一次嘗試創建一個小部件。dojo 1.9:在修改過的templateString上的變量替換失敗
LVS /插件/ LoginPage.js
define([
// Dojo
"dojo/_base/declare",
"dojo/dom-construct",
"dojo/query",
// Dijit
"dijit/_WidgetBase",
// xwt
"xwt/widget/LoginPage",
"xwt/widget/CommonUtilities",
// lvs
"dojo/text!./templates/UserRegistration.html"
], function(
// Dojo
declare,
domConstruct,
query,
// Dijit
_WidgetBase,
// xwt
LoginPage,
xwtUtils,
// lvs
UserRegistration
) {
// We declare the namespace of our widget and add the mixins we want to use.
return declare("lvs.widget.LoginPage", [ LoginPage, _WidgetBase ], {
// userRegistrationLabel: String
// The text used for redirecting to user registration page
userRegistrationLabel: "New User? Register here.",
// userRegistrationURL: String
// URL for the page to register new user
userRegistrationURL: "RegistrationForm.html",
// needUserRegistrationLink: Boolean
// Whether the user registration link is visible or hidden
needUserRegistrationLink: true,
constructor: function(args) {
//make the constructor arguments a mixin
declare.safeMixin(this, args);
},
buildRendering: function() {
this.inherited(arguments);
var root = this.domNode;
var row = domConstruct.toDom(UserRegistration);
query('tr[dojoAttachPoint="problemRowAP"]', root).forEach(function(node) {
domConstruct.place(row, node, "after");
});
this.templateString = this.domNode.innerHTML;
// This does not work either
//domConstruct.place(UserRegistration, this.problemRowAP, "after");
},
postCreate: function() {
this.inherited(arguments);
this.set("userRegistrationURL", this.userRegistrationURL);
this.set("userRegistrationLabel", this.userRegistrationLabel);
},
startup: function() {
this.inherited(arguments);
if(!this.needUserRegistrationLink){
this._removeUserRegistrationLink();
}
},
_showUserRegistrationDlg: function() {
xwtUtils.openURL(this.userRegistrationURL, "_new");
},
_removeUserRegistrationLink: function() {
dojo.destroy(this.userRegistrationRowAP);
},
_setUserRegistrationLabelAttr: function(label) {
this._set("userRegistrationLabel", label);
},
_setUserRegistrationURLAttr: function(url) {
this._set("userRegistrationURL", url);
}
});
});
LVS /插件/模板/ UserRegistration.html
<tr data-dojo-attach-point="userRegistrationRowAP">
<td></td>
<td class="problem" style="padding-left: 0px; padding-top: 5px;">
<span data-dojo-attach-point="userRegistrationAP" class="problemsLoggingIn" style="margin-left: 8px;">
<a data-dojo-attach-point="userRegistrationAnchor" href="${userRegistrationURL}" target="_top" tabIndex="0" data-dojo-attach-event="ondijitclick:_showUserRegistrationDlg">${userRegistrationURL}</a>
</span>
</td>
</tr>
微件實例化代碼:
var loginPage = new LoginPage({
id: "login_form",
// other properties set here...
userRegistrationLabel: "New user registration",
userRegistrationURL: "RegistrationPage.html",
onClickSubmit: function() {
alert('The form will be submitted');
}
}, "login_form");
loginPage.set('userRegistrationLabel', 'New User? Register here.');
loginPage.set('userRegistrationURL', 'RegistrationPage.html');
loginPage.startup();
輸出被連接下面。
感謝您的洞察力。你如何建議這可以做到? –
你可以用多種方式做到這一點。最乾淨的是,如果你繼承了一個帶有過量聲明模板的新小部件。這使您能夠在沒有domConstruct操作的情況下使用簡單的html代碼對錶格做進一步的修改。我相信這不是Dojo中最後一個模板問題,它不是你的錯。 – peterh
因爲我沒有時間完成原型,所以我將模板複製到我的名稱空間並修改了html以添加額外的行。感謝您的建議。 –