2017-04-25 27 views
1

我目前正試圖實現與UI5條件的路由...SAP UI5的RadioButtonGroup如果選擇

這是我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"); 
     } 
    }); 
    } 
) 

目前,它只是導航到idpage2,如果您單擊StandardTile End of of Warranty。 RadioButtons沒有被識別,沒有條件。

我想要做的:只有導航如果選擇ID爲RB1單選按鈕來idpage2。如果選擇了RB2,請導航到idpage3。

有什麼想法?謝謝

回答

1

在定義要導航的位置之前,您應該檢查RadioButtons的「selected」屬性。使用getSelected()函數: https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.m.RadioButton.html#getSelected

這裏與信息片段您提供:

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv='X-UA-Compatible' content='IE=edge'> 
 
\t \t <meta charset="utf-8"> 
 

 
\t \t <title>MVC with XmlView</title> 
 

 
\t \t <!-- Load UI5, select "blue crystal" theme and the "sap.m" control library --> 
 
\t \t <script id='sap-ui-bootstrap' 
 
\t \t \t src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' 
 
\t \t \t data-sap-ui-theme='sap_belize_plus' 
 
\t \t \t data-sap-ui-libs='sap.m' 
 
\t \t \t data-sap-ui-xx-bindingSyntax='complex'></script> 
 

 

 
\t \t <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES --> 
 

 
\t \t <!-- define a new (simple) View type as an XmlView 
 
\t \t - using data binding for the Button text 
 
\t \t - binding a controller method to the Button's "press" event 
 
\t \t - also mixing in some plain HTML 
 
\t \t note: typically this would be a standalone file --> 
 

 
\t \t <script id="view1" type="sapui5/xmlview"> 
 
\t \t <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> 
 
\t \t </mvc:View> 
 
     </script> 
 

 

 
\t \t <script> 
 
\t \t \t // define a new (simple) Controller type 
 
\t \t \t sap.ui.controller("my.own.controller", { 
 
       
 
       
 
\t \t \t \t _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(); 
 
       } 
 
\t \t \t }); 
 
\t 
 
\t \t \t // instantiate the View 
 
\t \t \t var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above 
 
\t \t 
 
\t \t \t myView.placeAt('content'); 
 
\t \t </script> 
 
\t 
 
\t </head> 
 
\t <body id='content' class='sapUiBody'> 
 
\t </body> 
 
</html>

+0

此制定了罰款,謝謝! –

+0

太棒了!很高興聽到它!您可以將其標記爲解決方案,以便更容易地找到具有相同標誌的其他人的解決方案 –

0

在 「_onStandardTilePress」

  • 得到的是選擇
  • 路線適當

你在哪裏卡住的單選按鈕

  • 檢查的實例?