Created
July 17, 2015 14:45
-
-
Save ikiw/5795503e278ecda49c08 to your computer and use it in GitHub Desktop.
XML templating in Ui5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html><head> | |
| <meta http-equiv='X-UA-Compatible' content='IE=edge' /> | |
| <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> | |
| <title>test</title> | |
| <script id='sap-ui-bootstrap' type='text/javascript' | |
| src='/sapui5/resources/sap-ui-core.js' | |
| data-sap-ui-theme='sap_goldreflection' | |
| data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script> | |
| <!-- add 'sap.ui.table' and/or other libraries if required --> | |
| <script id="view1" type="sapui5/xmlview"> | |
| <mvc:View | |
| xmlns:mvc="sap.ui.core.mvc" | |
| xmlns="sap.m" | |
| xmlns:l="sap.ui.layout" | |
| xmlns:core="sap.ui.core" | |
| xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1" | |
| controllerName="views.main" | |
| > | |
| <l:VerticalLayout> | |
| <template:repeat list="{meta>members}" var="member"> | |
| <Text text="{member>last}" /> | |
| <Text text="{member>first}" /> | |
| <template:if test="{member>image}"> | |
| <template:then> | |
| <Image src="{member>image}" /> | |
| </template:then> | |
| <template:else> | |
| <Image src="http://www.thinlizzy.org/images/navigation/nav_cutout.gif" /> | |
| </template:else> | |
| </template:if> | |
| </template:repeat> | |
| </l:VerticalLayout> | |
| </mvc:View> | |
| </script> | |
| <script> | |
| //Controller | |
| sap.ui.controller("views.main", { | |
| onInit : function() { | |
| // bind view instance to runtime data as usual | |
| this.getView().bindElement("/bands/0/members/0") | |
| } | |
| }); | |
| var oModel = new sap.ui.model.json.JSONModel(); | |
| var data = { | |
| bands: [ | |
| { | |
| name: "Thin Lizzy", | |
| members: [ | |
| { | |
| first:"Phil", | |
| last:"Lynott", | |
| image:"http://www.thisdayinmusic.com/upload/Phil+Lynott+PhilLynott_1816.jpg", | |
| birthdate:"20. August 1949" | |
| }, | |
| {first:"Scott", last:"Gorham",image:"http://www.thinlizzy.org/images/biog_scott.jpg",birthdate:"17. März 1951"}, | |
| {first:"Brian", last:"Robertson",birthdate:"12. Februar 1956"}, | |
| {first:"Brian", last:"Downey",image:"http://www.thinlizzy.org/images/biog_briand.jpg",birthdate:"27. Januar 1951"} | |
| ] | |
| } | |
| ] | |
| }; | |
| oModel.setData(data); | |
| sap.ui.getCore().setModel(oModel); | |
| oMetaContext = oModel.createBindingContext("/bands/0"); | |
| jQuery.sap.require("sap.ui.model.odata.AnnotationHelper"); | |
| oDetailView = sap.ui.view({ | |
| preprocessors: { | |
| xml: { // call default XML pre-processor with arguments | |
| bindingContexts: { | |
| meta: oMetaContext | |
| }, | |
| models: {meta: oModel} | |
| } | |
| }, | |
| viewContent: jQuery("#view1").html(), | |
| type: sap.ui.core.mvc.ViewType.XML | |
| }).placeAt('content'); | |
| </script> | |
| </head> | |
| <body class='sapUiBody'> | |
| <div id="content"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It'd be great if someone could explain me how to assign unique ids to text elements inside template:repeat