Question

我目前正在尝试使用带有UI5的条件实现路由...

这是我的view.xml：

        <VBox class="sapUiSmallMargin">
            <RadioButtonGroup id="bgroup" columns="2" class="sapUiMediumMarginBottom">
                <buttons>
                    <RadioButton id="RB1" text="start with segmentation"/>
                    <RadioButton id="RB2" text="start with target group"/>
                </buttons>
            </RadioButtonGroup>
        </VBox>

        <m:HBox>
            <m:items>
                <m:StandardTile title="End-of-Warranty" infoState="None" icon="sap-icon://car-rental" press="_onStandardTilePress"/>
                <m:StandardTile title="End-of-Leasing" infoState="None" icon="sap-icon://car-rental"/>
            </m:items>
            <m:layoutData/>
        </m:HBox>

这就是我的.js文件现在正在看的内容：

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
     "use strict";

     return Controller.extend("wizard.controller.page1", {

         _onStandardTilePress: function (oEvent) {
             var oapp = sap.ui.getCore().byId("dcw");

         oapp.to("idpage2");
         }
     });
     }
)

目前，如果您点击StandardTile End-of-Warranty，它只会导航到idpage2。 RadioButtons没有被识别，没有条件。

我想要做的事情：如果选择了带有ID RB1的RadioButton，则只导航到idpage2。如果选择了RB2，请导航到idpage3。

有什么想法吗？谢谢

Answer 1

在定义导航位置之前，您应该检查RadioButtons的“selected”属性。使用getSelected（）函数： https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.m.RadioButton.html#getSelected

这是一个包含您提供的信息的代码段：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta charset="utf-8">

		<title>MVC with XmlView</title>

		<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
		<script id='sap-ui-bootstrap'
			src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
			data-sap-ui-theme='sap_belize_plus'
			data-sap-ui-libs='sap.m'
			data-sap-ui-xx-bindingSyntax='complex'></script>


		<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

		<!-- define a new (simple) View type as an XmlView
		 - using data binding for the Button text
		 - binding a controller method to the Button's "press" event
		 - also mixing in some plain HTML
		 note: typically this would be a standalone file -->

		<script id="view1" type="sapui5/xmlview">
		<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
          <App id="dcw">
            <pages>
              <Page id="idpage1">
              <VBox class="sapUiSmallMargin">
                  <RadioButtonGroup id="bgroup" columns="2" class="sapUiMediumMarginBottom">
                      <buttons>
                          <RadioButton id="RB1" text="start with segmentation"/>
                          <RadioButton id="RB2" text="start with target group"/>
                      </buttons>
                  </RadioButtonGroup>
              </VBox>

              <HBox>
                  <items>
                      <StandardTile title="End-of-Warranty" infoState="None" icon="sap-icon://car-rental" press="_onStandardTilePress"/>
                      <StandardTile title="End-of-Leasing" infoState="None" icon="sap-icon://car-rental"  press="_onStandardTilePress"/>
                  </items>
                  <layoutData/>
              </HBox>
              </Page>
              <Page id="idpage2" showNavButton="true" navButtonPress="onNavBack">
                  <ObjectHeader title="Page2 - start with segmentation"/>
              </Page>
              <Page id="idpage3" showNavButton="true" navButtonPress="onNavBack">
                  <ObjectHeader title="Page3 - start with target group"/>
              </Page>
            </pages>
          </App>
		</mvc:View> 
        </script>


		<script>
			// define a new (simple) Controller type
			sap.ui.controller("my.own.controller", {
              
              
				_onStandardTilePress: function (oEvent) {
                    var oapp = this.getView().byId("dcw");
                      
                    if(this.getView().byId("RB1").getSelected()){
                       oapp.to(this.getView().byId("idpage2"));
                    }
                    else if(this.getView().byId("RB2").getSelected()){
                       oapp.to(this.getView().byId("idpage3"));
                    }
                 },
              
                onNavBack: function(oEvent){
                    oEvent.getSource().getParent().back();
                }
			});
	
			// instantiate the View
			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
		
			myView.placeAt('content');
		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>

选择SAP UI5 RadioButtonGroup

1 个答案: