Question

我有一个带有一些radiobuttons的xml视图，必须将数据绑定到模型。

我正在使用openui5-runtime-1.22.4。

我有以下控制器，它为绑定和2个按钮的句柄添加模型（重置，警报）：

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'));
    }
};

在视图的xml中是名称的字段和性别的一些单选按钮：

<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>

带有HBox绑定的样本，我来自https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/explored/index.html#/code/sap.m.sample.RadioButton下的sap.m资源管理器但它不起作用。

radiobutton没有值属性，为什么第二个例子也不起作用。

通过点击警告按钮，没有打印出任何性别值，名称来自核心。通过使重置按钮无效，名称被重置，没有单选按钮。

在doc i cave中计算RadioButtonGroup元素：https://openui5.hana.ondemand.com/#test-resources/sap/ui/commons/demokit/RadioButtonGroup.html 但看起来这个元素在sap.m库中不存在。我收到了以下警告，没有输出：

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

如何将模型的属性绑定到单选按钮组？

感谢您提供任何有用的答案。

编辑1：

格式化程序的使用在我的情况下不起作用。唯一改变的是，radiobutton旁边的标签从男性变为假。

XML-View：

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

JS仅供测试：

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

请注意，如果include脚本中的绑定语法设置为complex，则只会解析taxt属性的复杂值。

<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>

编辑2

我的问题的解决方法是检查控制器的_alertData _方法中单选按钮的选定状态。

所以控制器代码更改为以下内容：

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'));
}

是否有更好的解决方案将radiobutton的数据绑定到模型？

所以最初的问题，如何绑定无线电按钮上的数据，仍然是开放的。

Answer 1

单选按钮没有值，但您可以根据性别绑定所选属性，使用格式化程序。例如：maleFormatter = function(gender) { return gender == "male"}

Answer 2

我来这里寻找答案，但随后找到了answer

你需要像这样绑定到所选属性......

<RadioButton id="rbid" text="Radio Button Text" selected="{path:'BooleanValue', formatter:'fnBooleanFormatter'}"/>

我将其绑定到其中一个按钮，然后该组中的其他按钮跟随此线索。对于两个以上的按钮，您可以使用多个格式化程序来确保选择一个值。

如何绑定radiobutton上的数据

2 个答案: