dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
93 lines (80 loc) • 2.29 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Dojo MVC Node Widget Test</title>
<style type="text/css">
@import "../../../dijit/themes/claro/document.css";
@import "../../../dijit/tests/css/dijitTests.css";
.bgRed {
background-color: red;
}
.bgGreen {
background-color: green;
}
.bgBlue {
background-color: blue;
}
.boldText {
font-weight: Bold;
}
</style>
<!-- required: a default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<script type="text/javascript">
require = {
isDebug: 1,
async: 1,
mvc: {debugBindings: 1}
};
</script>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojox",
"dojo/Stateful",
"dojo/parser",
"dojox/mvc/parserExtension",
"dojo/domReady!"
], function(dojox, Stateful, parser){
titleModel = new Stateful({value: "Foo"});
colorModel = new Stateful({value: "bgRed"});
boldTextModel = new Stateful({checked: false});
parser.parse();
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div>
<div>
Text:
<span data-mvc-bindings="class: at(boldTextModel, 'checked').direction(at.from).transform({format: function(value){ return value ? 'boldText' : ''; }}),
innerText: at(titleModel, 'value')"></span>
</div>
<div>
Choose text from:
<select type="combo" data-mvc-bindings="value: at(titleModel, 'value')">
<option value="Foo">Foo</option>
<option value="Bar">Bar</option>
</select>
</div>
</div>
<div style="margin-top:8px;">
<div style="width:200px;height:200px;" data-mvc-bindings="class: at(colorModel, 'value')"></div>
<div>
Choose color from:
<select type="combo" data-mvc-bindings="value: at(colorModel, 'value')">
<option value="bgRed">Red</option>
<option value="bgGreen">Green</option>
<option value="bgBlue">Blue</option>
</select>
</div>
</div>
<div style="margin-top:8px;">
The text should be bold:
<input type="checkbox" data-mvc-bindings="checked: at(boldTextModel, 'checked')">
</div>
</body>
</html>