如何检索RadioButton的绑定属性的值,该属性是InputListItem的一部分并具有聚合绑定?

时间:2017-06-27 08:00:15

标签: sapui5

我在jsbin上有以下代码,我正在尝试。我需要获得模型“答案”中提到的“Id”属性的值。直到现在尝试我明白我需要使用select事件来提醒所选值。 我也试过使用event.getSource().getSelectedItem().getBindingContext().getObject().Id 但我无法获得“Id”属性值。 你可以在jsbin下找到我正在尝试的代码: http://jsbin.com/peciqaq/1/edit?html,output

3 个答案:

答案 0 :(得分:1)

如果您需要单一选择功能,则无需将单选按钮放在列表项中。只需使用List的标准mode属性即可。

然后,您将能够使用列表中的“selectionChange”事件,并按照您在问题中提到的方式获取ID。

答案 1 :(得分:1)

这将为您提供所需的信息(onSelectRadio函数):

fields

但是你在这里做了一件奇怪的事情:使用你自己构建的单选按钮来检测selcetion而不是利用sapui5 List本身

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

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

然后你可以访问列表选择项(alert(event.getSource()。getSelectedItem()。getBindingContext()。getObject()。Id);但这次是在onSelectionChange函数中)

答案 2 :(得分:1)

您必须从绑定模型中获取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>