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.
84 lines (75 loc) • 3.41 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>RadioButton MVC test</title>
<style type="text/css">
@import "../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" data-dojo-config="parseOnLoad:1,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/parser",
"dijit/registry",
'dojox/mvc/at',
"dojox/mvc/EditModelRefController",
"dojox/mvc/getStateful",
"dojo/Stateful",
"dojox/mvc/Output",
"dijit/form/RadioButton",
"dijit/form/Button" // used for example purpose
], function(ready, parser, registry, at, EditModelRefController, getStateful, Stateful, RadioButton){
var data = { selectedValue: "",
radio1Checked: false,
radio1Value: "Tea",
radio2Checked: false,
radio2Value: "Coffee",
radio3Checked: false,
radio3Value: "Coke",
radio4Checked: false,
radio4Value: "Pepsi"
};
model = getStateful(data);
transformRadioChecked = {
format: function(checked){
return checked;
},
parse: function(checked){
if(checked){
model.set("selectedValue", this.target.value);
console.log("in transformRadioChecked setting selectedValue to "+this.target.value);
}
return checked;
}
};
ready(function(){
registry.byId("radio3").set("value", at(model, "radio3Value"));
registry.byId("radio3").set("checked", at(model, "radio3Checked").transform(transformRadioChecked));
registry.byId("radio4").set("value", at(model, "radio4Value"));
registry.byId("radio4").set("checked", at(model, "radio4Checked").transform(transformRadioChecked));
registry.byId("radio1").set("checked", true);
});
});</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<h1>Bind MVC model to Radio buttons</h1>
<h2>Bind the value, label and checked, and set selectedValue in the model.</h2>
<form id="myform">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio1"
data-dojo-props="value: at(model, 'radio1Value'), checked: at(model, 'radio1Checked').transform(transformRadioChecked)"/>
<label for="radio1" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio1Value')"></label> <br />
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio2"
data-dojo-props="value: at(model, 'radio2Value'), checked: at(model, 'radio2Checked').transform(transformRadioChecked)"/>
<label for="radio2" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio2Value')"></label> <br />
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio3"/>
<label for="radio3" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio3Value')"></label> <br />
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio4"/>
<label for="radio4" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio4Value')"></label> <br />
</form>
<br />
<label>Selected Value is:</label> <br />
<div data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'selectedValue')"></div> <br />
</body>
</html>