如何在单选按钮上绑定数据

Posted 2023-02-27

【中文标题】如何在单选按钮上绑定数据

【英文标题】：How to bind data on radiobutton

【发布时间】：2014-06-13 08:01:04

【问题描述】：

我有一个带有一些单选按钮的 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
    
    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 资源管理器中获得 但它不起作用。

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

通过单击警报按钮，不会打印出任何性别值，名称是正确的。 通过点击重置按钮，名称被正确重置，单选按钮没有。

我在文档中找到 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：

在我的情况下，使用格式化程序不起作用。唯一改变的是，单选按钮旁边的标签从男性更改为 false。

XML 视图：

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

JS 仅用于测试：

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

请注意，只有在包含脚本中的绑定语法设置为 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'));

有没有更好的解决方案将单选按钮的数据绑定到模型？

所以最初的问题，，仍然是一个开放的问题。

【参考方案1】：

RadioButton 没有值，但可以将选中的属性与性别绑定， 使用格式化程序。例如：maleFormatter = function(gender) return gender == "male"

【讨论】：

如何为 xml 视图中的单选按钮定义格式化程序？请参阅主要问题中的 Edit 1。感谢您的回复。

我已经将index.html的include脚本中的绑定语法设置为复杂的data-sap-ui-xx-bindingSyntax="complex"，所以使用了格式化程序。但是格式化程序只处理单选按钮旁边的文本的初始输出。所以文本是 false 而不是男性 ^^ 我的问题的解决方案是检查控制器的 alertData 方法中的选定状态（参见编辑 2）。如果还有其他更清洁的解决方案，请随时告诉我。谢谢

【参考方案2】：

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

您需要像这样绑定到选定的属性...

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

我将它绑定到其中一个按钮，组中的其他按钮遵循此引导。对于两个以上的按钮，您可以使用多个格式化程序来确保选择一个值..