如何检索radiobutton的绑定特性的值，该deptibutton是InputListItem的一部分并具有聚集点的

我在JSBIN上具有以下代码。我需要获取模型"答案"中提到的" ID"属性的价值。直到尝试时，我知道我需要使用选择事件来提醒所选值。我还尝试使用event.getSource().getSelectedItem().getBindingContext().getObject().Id但是我无法获得" ID"属性值。您可以找到我在JSBIN下方尝试的代码：http://jsbin.com/peciqaq/1/edit?html，output

您必须从绑定模型中获取Id。

将您的onSelectRadio事件处理程序更改为以下：

if(!event.getParameter("selected")) return;
var oModel = event.getSource().getModel();
var sPath = event.getSource().getBindingContext().getPath()
alert(oModel.getProperty(sPath+"/Id"));

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <title>List example</title>
      
        <script id="sap-ui-bootstrap" 
                type="text/javascript"
                src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-libs="sap.ui.commons, sap.m"
                data-sap-ui-xx-bindingSyntax="complex">
        </script>
        <!-- XML-based view definition mode="SingleSelectMaster" -->
        <script id="view1" type="sapui5/xmlview">
            <mvc:View
              controllerName="local.controller"
              xmlns:core="sap.ui.core"
              xmlns:f="sap.ui.layout.form"
              xmlns:l="sap.ui.layout"
              xmlns:mvc="sap.ui.core.mvc"
              xmlns="sap.m">
          <List
	       	headerText="Awesome List"
		    items="{/answers}"
            id="singleChoice"
            selectionChange="onSelectionChange">
		    <items>
			  <InputListItem label="{answerText}">
                <RadioButton select="onSelectRadio"/>
              </InputListItem>
		    </items>
	      </List>
          
          </mvc:View> 
        </script>
        <script>
            // Controller definition
            sap.ui.controller("local.controller", {
              onInit: function() {
                var oData =   {
                  "answers": [{
                      "Id":1,
                      "answerText": "Cats"
                  }, {
                      "Id":2,
                      "answerText": "Rabbits"
                  }, {
                      "Id":3,
                      "answerText": "Dogs"
                  }, {
                      "Id":4,
                      "answerText": "Hamsters"
                  }]
                };
                sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(oData));
              },
              /*onSelectionChange: function(event) {
                alert(event.getSource().getSelectedItem().getBindingContext().getObject().Id);
                console.log(JSON.stringify(event.getSource().getSelectedItem().getBindingContext().getObject()));
              },*/
              onSelectRadio: function(event){
				if(!event.getParameter("selected")) return;
				var oModel = event.getSource().getModel();
				var sPath = event.getSource().getBindingContext().getPath()
				alert(oModel.getProperty(sPath+"/Id"));
                //alert(this.byId("singleChoice").getSelectedItem());
                //alert(event.getSource().getSelectedItem().getBindingContext().getObject().Id);
              }
            });
           
            // Instantiate the View, assign a model
            // and display
            var oView = sap.ui.xmlview({
                viewContent: jQuery('#view1').html()
            });
               
            oView.placeAt('content');
        </script>
    </head>
 
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

，如果您需要单个选择功能，则不必在列表项目中放置按钮。只需使用列表的标准模式属性即可。

然后，您将能够在列表上使用"选择change"事件，并以您在问题中提到的方式使用ID。

这将为您提供所需的信息(OnSelectRadio函数(：

alert(event.getSource().getBindingContext().getObject().Id);

但是您在这里做一个奇怪的事情：使用构建的广播按钮来检测Selcetion，而不是利用SAPUI5列表本身

您可以使用以下代码使用列表本身：

<List
    headerText="Awesome List"
    items="{/answers}"
    id="singleChoice"
    mode="SingleSelect"
    selectionChange="onSelectionChange">
    <items>
        <StandardListItem title="{answerText}"/>
    </items>
</List>

然后您可以访问列表所选项目(alter(event.getSource((。getSelectedItem((。getBindingContext((。getObject((。>

相关内容

最新更新

热门标签：