| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|---|
| 5 | <title>RadioButton MVC test</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../../../dijit/themes/claro/claro.css"; |
|---|
| 8 | </style> |
|---|
| 9 | <script type="text/javascript" data-dojo-config="parseOnLoad:1,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../dojo/dojo.js"></script> |
|---|
| 10 | <script type="text/javascript"> |
|---|
| 11 | require([ |
|---|
| 12 | |
|---|
| 13 | "dojo/ready", |
|---|
| 14 | "dojo/parser", |
|---|
| 15 | "dijit/registry", |
|---|
| 16 | 'dojox/mvc/at', |
|---|
| 17 | "dojox/mvc/EditModelRefController", |
|---|
| 18 | "dojox/mvc/getStateful", |
|---|
| 19 | "dojo/Stateful", |
|---|
| 20 | "dojox/mvc/Output", |
|---|
| 21 | "dijit/form/RadioButton", |
|---|
| 22 | "dijit/form/Button" // used for example purpose |
|---|
| 23 | ], function(ready, parser, registry, at, EditModelRefController, getStateful, Stateful, RadioButton){ |
|---|
| 24 | var data = { selectedValue: "", |
|---|
| 25 | radio1Checked: false, |
|---|
| 26 | radio1Value: "Tea", |
|---|
| 27 | radio2Checked: false, |
|---|
| 28 | radio2Value: "Coffee", |
|---|
| 29 | radio3Checked: false, |
|---|
| 30 | radio3Value: "Coke", |
|---|
| 31 | radio4Checked: false, |
|---|
| 32 | radio4Value: "Pepsi" |
|---|
| 33 | }; |
|---|
| 34 | |
|---|
| 35 | model = getStateful(data); |
|---|
| 36 | |
|---|
| 37 | transformRadioChecked = { |
|---|
| 38 | format: function(checked){ |
|---|
| 39 | return checked; |
|---|
| 40 | }, |
|---|
| 41 | parse: function(checked){ |
|---|
| 42 | if(checked){ |
|---|
| 43 | model.set("selectedValue", this.target.value); |
|---|
| 44 | console.log("in transformRadioChecked setting selectedValue to "+this.target.value); |
|---|
| 45 | } |
|---|
| 46 | return checked; |
|---|
| 47 | } |
|---|
| 48 | }; |
|---|
| 49 | |
|---|
| 50 | ready(function(){ |
|---|
| 51 | |
|---|
| 52 | registry.byId("radio3").set("value", at(model, "radio3Value")); |
|---|
| 53 | registry.byId("radio3").set("checked", at(model, "radio3Checked").transform(transformRadioChecked)); |
|---|
| 54 | registry.byId("radio4").set("value", at(model, "radio4Value")); |
|---|
| 55 | registry.byId("radio4").set("checked", at(model, "radio4Checked").transform(transformRadioChecked)); |
|---|
| 56 | registry.byId("radio1").set("checked", true); |
|---|
| 57 | |
|---|
| 58 | }); |
|---|
| 59 | });</script> |
|---|
| 60 | </head> |
|---|
| 61 | <body class="claro"> |
|---|
| 62 | <script type="dojo/require">at: "dojox/mvc/at"</script> |
|---|
| 63 | <h1>Bind MVC model to Radio buttons</h1> |
|---|
| 64 | <h2>Bind the value, label and checked, and set selectedValue in the model.</h2> |
|---|
| 65 | |
|---|
| 66 | <form id="myform"> |
|---|
| 67 | <input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio1" |
|---|
| 68 | data-dojo-props="value: at(model, 'radio1Value'), checked: at(model, 'radio1Checked').transform(transformRadioChecked)"/> |
|---|
| 69 | <label for="radio1" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio1Value')"></label> <br /> |
|---|
| 70 | <input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio2" |
|---|
| 71 | data-dojo-props="value: at(model, 'radio2Value'), checked: at(model, 'radio2Checked').transform(transformRadioChecked)"/> |
|---|
| 72 | <label for="radio2" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio2Value')"></label> <br /> |
|---|
| 73 | <input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio3"/> |
|---|
| 74 | <label for="radio3" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio3Value')"></label> <br /> |
|---|
| 75 | <input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio4"/> |
|---|
| 76 | <label for="radio4" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio4Value')"></label> <br /> |
|---|
| 77 | |
|---|
| 78 | </form> |
|---|
| 79 | <br /> |
|---|
| 80 | <label>Selected Value is:</label> <br /> |
|---|
| 81 | <div data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'selectedValue')"></div> <br /> |
|---|
| 82 | |
|---|
| 83 | </body> |
|---|
| 84 | </html> |
|---|
