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.
84 lines
3.3 KiB
84 lines
3.3 KiB
<!DOCTYPE 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> |