Question

我有一个要求，我需要根据响应中的项目数动态创建SegmentedButtonItem。

查看：我的xml视图中的分段按钮代码：

<HBox id="buttonchoice" alignItems="Center" justifyContent="Center" width="100%">
   <SegmentedButton select="setInitialChoices" id="paymentMethodSelection">
       <items>
           <SegmentedButtonItem id="55" text="Cloud Offering" width="200px"/>
           <SegmentedButtonItem id="56" text="BIT"/>
           <SegmentedButtonItem id="57" text="Others" width="100px" press="_segmentButtonSelected"/>                                            
       </items>
   </SegmentedButton>
</HBox>

控制器代码：

success: function(data, textStatus, jqXHR) {
    var that = this;
    if (data.length !== 0) {
        if (data.questions["0"].id === 54) {
            var oInput1 = new sap.m.Text('input1');
            //.questions["0"].question
            oInput1.setText(data.questions["0"].question);
            oInput1.setTooltip("This is a tooltip ");
            var oLayout = this.getView().byId("testform");
            oLayout.addContent(oInput1);
            var oSegBtn = new sap.m.SegmentedButton();
            //var oSegBtn = new sap.m.SegmentedButton();
            for (var i = 0; i < data.length; i++) {
                oSegBtn = ({
                    items: [
                        new sap.m.SegmentedButtonItem(i, {
                            text: "Navigation Off",
                            press: [that.handleButtonPress, this]
                        })
                    ]
                    //  press: [that.handleButtonPress, that]
                });
                //  oSegBtn 
            }
            var oLayout1 = this.getView().byId("choiceQs");
            oLayout1.addContent(oSegBtn);
        }
    }
}

问题：

上面的代码只创建了一个按钮并添加到内容中，其中data.length为3，理想情况下我需要创建3个按钮并添加到视图中放置的内容。

你能建议吗。

Answer 1

你必须改变循环的代码。只需在循环中创建SegmentedButtonItem并调用SegmentedButton的addItem。

var oSegBtn = new sap.m.SegmentedButton();
for (var i = 0; i < data.length; i++) {
    var oSegmentButtonItem = 
            new sap.m.SegmentedButtonItem({
                text: "Navigation Off",
                press: [that.handleButtonPress, this]
            })
        ;
    oSegBtn.addItem(oSegmentButtonItem);
}

请参阅正在运行的示例。

<!DOCTYPE html>
	<html>

		<head>
			<meta charset="utf-8">
				<meta name="viewport" content="width=device-width">
					<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_belize" data-sap-ui-xx-bindingSyntax="complex">
					</script>



				<script id="view1" type="sapui5/xmlview">
					<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
			<HBox id="buttonchoice" alignItems="Center" justifyContent="Center" width="100%">
					</HBox>
		</mvc:View> 
	</script>


			<script>
				// define a new (simple) Controller type
				sap.ui.controller("my.own.controller", {

					// implement an event handler in the Controller
					onInit: function() {
					var aMockData = ["item 1","item 2","item 3"];
					var that = this;
					var oSegBtn = new sap.m.SegmentedButton();
					for (var i = 0; i < aMockData.length; i++) {
						var oSegmentButtonItem =
								new sap.m.SegmentedButtonItem({
					id: "id"+i,
									text: "Navigation Off " + aMockData[i],
									press: [that.handleButtonPress, this]
								})
							;
						oSegBtn.addItem(oSegmentButtonItem);
					}
					var oHBox = this.getView().byId("buttonchoice");
					oHBox.addItem(oSegBtn);
				},

				handleButtonPress: function(oEvent) {
					var oItem = oEvent.getSource();
					alert(oItem.getText() + " is clicked");
				}
			});


			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()});

			myView.placeAt('content');

		</script>

		</head>
		<body id='content' class='sapUiBody'>
		</body>
</html>

如何动态创建segmentedButtonItems

1 个答案: