How to bind data on radiobutton

Question

I have a xml view with some radiobuttons, an has to bind the data to a model.

I'am using the openui5-runtime-1.22.4.

I have the following controller, which adds the model for the binding and the handles for the 2 buttons (reset, alert):

sap.ui.controller("myapp.FORM", {
    onInit : function() {
        var model = new sap.ui.model.json.JSONModel();
        sap.ui.getCore().setModel(model, "mydata");
    },
    resetData : function(event) {
        this.getView().getModel("mydata").setData({});
    },
    alertData : function(event) {
        var oUserData = this.getView().getModel("mydata");
        var aTest = [];
        jQuery.each(oUserData.getData(), function (index, value) {
            aTest.push(index + ' : ' + value);
        });
        alert(aTest.join('\n'));
    }
};

In the xml for the view are a field for the name and some radiobuttons for the gender:

<mvc:View
    height="100%"
    controllerName="myapp.FORM"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:f="sap.ui.layout.form"
    xmlns="sap.m"
    xmlns:html="http://www.w3.org/1999/xhtml"
>
    <Page title="My APP" class="marginBoxContent">
        <content>
            <f:SimpleForm
                minWidth="320" maxContainerCols="2"
                editable="true" layout="ResponsiveGridLayout"
                labelSpanL="3" labelSpanM="3"
                emptySpanL="2" emptySpanM="0"
                columnsL="1" columnsM="1"
            >
                <f:content>
                    <Label text="Name" />
                    <Input type="Text" value="{mydata>/name}" />

                    <Label text="Gender 1" />
                    <HBox binding="{mydata>/gender1}">
                        <RadioButton id="gender1_male" groupName="groupGender1" text="male" />
                        <RadioButton id="gender1_male" groupName="groupGender1" text="female" />
                    </HBox>

                    <Label text="Gender 2" />
                    <RadioButton id="gender2_male" groupName="groupGender2" text="male" value="{mydata>/gender2}" />
                    <RadioButton id="gender2_male" groupName="groupGender2" text="female" value="{mydata>/gender2}" />
                </f:content>
            </f:SimpleForm>

            <Bar>
                <contentMiddle>
                    <Button icon="sap-icon://undo" text="Undo" press="resetData" />
                </contentMiddle>
                <contentRight>
                    <Button icon="sap-icon://action" text="Alert" press="alertData" />
                </contentRight>
            </Bar>

        </content>
    </Page>
</mvc:View>

The Sample with the binding in the HBox, i got from the sap.m explorer under https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/explored/index.html#/code/sap.m.sample.RadioButton but it doesnt work.

The radiobutton does not have a value attribute, why the second excample also doesnt works.

By cliking the alert button, none of the gender values are printed out, the name comes corectly. By clinking the reset button, the name was resetted corectly, the radio buttons not.

In the doc i cave fount the RadioButtonGroup element: https://openui5.hana.ondemand.com/#test-resources/sap/ui/commons/demokit/RadioButtonGroup.html But it looks as if this element does not exist in the sap.m library. I Got the Following Warning an no output was build:

Warning: [404] "/resources/sap/m/RadioButtonGroup.js": Service=6ms, Find=6ms
  Reason: Resource could not be found!

How can i bind a property of a model to a radio button group?

Thanks for any helpful answer.

Edit 1:

The use of a formatter doesn't work in my case. the only what is changed is, that the label next to the radiobutton was changed from male to false.

XML-View:

<RadioButton groupName="groupGender1" text="{path : 'male',formatter:'maleFormatter'}" />

JS for test only:

maleFormatter = function(gender) { alert(this.getId() + ' : ' + gender); return gender == "male"; };

Note, that the complex value of the taxt attribute will only be parsed, if the binding syntax in the include script was set to complex.

<script id='sap-ui-bootstrap' type='text/javascript' src='resources/sap-ui-core-dbg.js'
    data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m, sap.ui.layout'></script>

Edit 2

The workaround, of my problem is to check the selected state of the radio button in the _alertData _ method of the controler.

so the controler code was changed to the following:

getUserData : function() {
    var oUserModel = this.getView().getModel("mydata"),
    oUserData = oUserModel.getData();
    // check gender! for radios there is no databinding feature
    oUserData.gender = this.byId("gender1_male").getSelected() ? 'm' : 'w';
    oUserModel.setData(oUserData);
    return oUserModel.getData();
},
alertData : function(event) {
    var oUserData = this.getUserData();
    var aTest = [];
    jQuery.each(oUserData, function (index, value) {
        aTest.push(index + ' : ' + value);
    });
    alert(aTest.join('\n'));
}

Is there a better solution to bind the data of a radiobutton to a model?

So the initial question, How to bind data on radiobutton, is still an open.

Answer 1

The RadioButton has no value, but you can bind the selected property against the gender, using a formatter. E.g: maleFormatter = function(gender) { return gender == "male"}