单选按钮组上的SapUi5数据绑定不起作用

Question

can some one please advise on the two-way data binding of the radio buttons with SAP UI5. 能否请您提供一些有关SAP UI5单选按钮的双向数据绑定的建议。 In the data model I have an attribute called textType, it can return "Y" or "N", based on that I have to select the correspondent radio button 在数据模型中，我有一个名为textType的属性，它可以返回“ Y”或“ N”，这是基于我必须选择相应的单选按钮的结果

 <m:RadioButton text="yes" selected="{path:'/textType',formatter: function(val){ if(textType== 'Y') return true; }else{ return false} }"/><m:RadioButton text="No" selected="{Selected}"/>

however I am not able to set the value. 但是我无法设置该值。 I tried using the radiobutton group however no success 我尝试使用单选按钮组，但是没有成功

 <RadioButtonGroup buttons="{/Type}" >
<RadioButton text="YES" selected = "{Selected}" />
<RadioButton text="No" selected = "{Selected}" />
</RadioButtonGroup>

can some one pls advise on this . 有人可以建议这个吗。

Updating the model data code . 更新模型数据代码。

    var stermType = this.getView().byId("rbgTermType").getSelectedButton().getText(),                   
    sElecReg = this.getView().byId("rbgElecReg").getSelectedButton().getText(),                 
    sOpenReg = this.getView().byId("rbgOpenReg").getSelectedButton().getText(),                 
    sConfirmgdpr = this.getView().byId("idConfirmgdpr").getSelected(),                      
    oData = {};                 
    oData = {                   
    Term_Type: stermType,                       
    Electoral_Reg: sElecReg,                    
    Open_Reg: sOpenReg,                     
    Data_Protection_Confirm: sConfirmgdpr,                  
    };

    this.getView().setBusy(true);                   
    var that = this;                    
    var mParams = {                     
    success: function () {                          
    that.getView().setBusy(false);                      
    }.bind(),                   
    error: function (err) {                         
    that.getView().setBusy(false);                             
that.fnShowErrorMessage(jQuery.parseJSON(err.responseText).error.message.value)                     
    }.bind()  
};                      
this.getOwnerComponent().getModel().update(  "/PassportVisaBankCitizenshipDetailsSet(StudentObjid='',PassportNumber='',AccountNumber='')", oData, mParams);
this.getOwnerComponent().getModel().refresh(true);

Answer 1

the closest thing that you can do it treat 0 as Y and 1 as N. here is a working example. 您可以执行的最接近的操作将0视为Y，将1视为N。这是一个有效的示例。 https://jsbin.com/hutuvo/edit?html,output https://jsbin.com/hutuvo/edit?html，输出

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC</title>
    <script id="sap-ui-bootstrap" type="text/javascript"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m,sap.ui.table"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>

    <script id="oView" type="sapui5/xmlview">
    <mvc:View
    controllerName="sap.example.Controller"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    height="100%">
      <RadioButtonGroup selectedIndex="{/selected}">
        <RadioButton text="YES" />
        <RadioButton text="No" />
      </RadioButtonGroup>
      <Button text="Check" press="checkValue" />
      </mvc:View>
    </script>
    <script>
      sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"],
                    function(Controller, JSONModel) {
        "use strict";

        var oPageController = Controller.extend("sap.example.Controller", {
          onInit: function() {
            this.getView().setModel(new JSONModel({
              selected: 1
            }));
          },
          checkValue: function() {
            alert(this.getView().getModel().getProperty("/selected") ? "NO" : "YES");
          }
        });
        return oPageController;
      });

      var oView = sap.ui.xmlview({
        viewContent: jQuery('#oView').html()
      });

      oView.placeAt('content');
    </script>
  </head>

  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>
</html>

Answer 2

Well, if the property textType has either value Y or N, you will need to use expression binding: 好吧，如果属性textType值为Y或N，则需要使用表达式绑定：

 <RadioButtonGroup >
   <RadioButton text="YES" selected = "{= ${textType}==='Y'}" />
   <RadioButton text="No"  selected = "{= ${textType}==='N'}" />
 </RadioButtonGroup>

The disadvantage is that you lose two-way when using expression binding. 缺点是使用表达式绑定时您会失去双向的机会。 So you will need an onSelect Event handler (check event name in api docs) 因此，您将需要一个onSelect事件处理程序（在api文档中检查事件名称）

If your property would be a Boolean , then you could just use 如果您的属性为Boolean ，则可以使用

 <RadioButtonGroup >
   <RadioButton text="YES" selected = "{textType}" />
   <RadioButton text="No"  selected = "{=!${textType}}" />
 </RadioButtonGroup>

and be done 并完成

UPDATE : Here is a working example: https://jsfiddle.net/iPirat/yhj3eabv/ 更新：这是一个工作示例： https : //jsfiddle.net/iPirat/yhj3eabv/

I have put the thwo above Radio Button Groups in place, using the sample model with content 我将单选按钮组上方的内容放置在适当的位置，并使用带有内容的示例模型

        {
          textType1: 'N',
          textType2: true
        }

The first {RadioButtonGroup} is working with {textType1} and an event handler is necessary 第一{的RadioButtonGroup}正在与{textType1}和一个事件处理程序是必要

The second {RadioButtonGroup} is working with the boolean {textType2} and no event handler is needed. 第二个{RadioButtonGroup}与布尔值{textType2}一起使用，不需要事件处理程序。 Binding does everything for you. 绑定为您完成所有工作。

单选按钮组上的SapUi5数据绑定不起作用

问题描述

2 个解决方案

解决方案1
2 2018-08-25 05:55:25

解决方案2
1 已采纳 2018-08-24 19:29:41

单选按钮组上的SapUi5数据绑定不起作用

问题描述

2 个解决方案

解决方案1 2 2018-08-25 05:55:25

解决方案2 1 已采纳 2018-08-24 19:29:41

解决方案1
2 2018-08-25 05:55:25

解决方案2
1 已采纳 2018-08-24 19:29:41