You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.2 KiB
92 lines
2.2 KiB
<!DOCTYPE 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>
|
|
|