이 학습에서 Dojo 레이아웃 위젯을 사용하여 레이아웃된 웹 페이지에 사용자 정의 Dojo 위젯을 삽입합니다. Dojo API를 사용하여 위젯을 결과 필드에 연결하고 결과를 표시하십시오.
<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
<div>Monthly Payment: <span id="monthlyPayment"></span></div>
[ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
function(dojo, registry) {
dojo.ready(function() {
});
});
var payment = loanWidget.monthlyPayment;
if (payment == NaN) {
payment = 0;
}
// update the result field
var formattedValue = dojo.currency.format(payment, {currency: "USD"});
dojo.attr("monthlyPayment", "innerHTML", formattedValue);
dojo.ready(function() {
// get the LoanInput widget
loanWidget = registry.byId('LoanInput');
// handle "calculate" from widget "LoanInput"
dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
var payment = loanWidget.monthlyPayment;
if (payment == NaN) {
payment = 0;
}
// update the result field
var formattedValue = dojo.currency.format(payment, {currency: "USD"});
dojo.attr("monthlyPayment", "innerHTML", formattedValue);
});
});
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="dojo/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
href="dojo/dijit/themes/claro/claro.css">
<title>t1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
data-dojo-config="isDebug: false, async: true, parseOnLoad: true"
src="dojo/dojo/dojo.js"></script>
<script type="text/javascript">
require(
// Set of module identifiers
[ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency" ],
// Callback function, invoked on dependencies evaluation results
function(dojo, registry) {
dojo.ready(function() {
// get the LoanInput widget
loanWidget = registry.byId('LoanInput');
// handle "calculate" from widget "LoanInput"
dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
var payment = loanWidget.monthlyPayment;
if (payment == NaN) {
payment = 0;
}
// update the result field
var formattedValue = dojo.currency.format(payment, {currency: "USD"});
dojo.attr("monthlyPayment", "innerHTML", formattedValue);
});
});
});
</script>
</head>
<body class="claro">
<div id="BorderContainer" style="height: 500px; width: 500px"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline'">
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'top'">Loan Payment Calculator</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
<div>Monthly Payment: <span id="monthlyPayment"></span></div>
</div>
</div>
</body>
</html>
사용자 정의 Dojo 위젯을 페이지에 추가했으며 서버에서 테스트했습니다.