Question

有没有办法在XML视图中访问列表项的内部计数器或索引属性，同时迭代SAPUI5 List控件的项目？用例可以是简单地枚举项目。或者在我的情况下，它将对第一个列表项进行特殊处理。

我正在寻找的是类似于以下示例中的假设$counter：

  <List items="{MyModel>/MyRootElement}">
    <items>
      <CustomListItem>
        <Text text="This is element number {MyModel>$counter}." />
      </CustomListItem>
    </items>
  </List>

我知道我可以在控制器中使用JS解决这个问题。但我会对纯XML解决方案感兴趣。

Answer 1

根据我的知识，没有内置的＆＃34;伪属性＆＃34;那将包含元素的索引。如果我们特别考虑排序，那么我想可能会有开发人员希望编号反映排序，而其他开发人员希望它在排序方面保持稳定。

尽管如此，在某些具体情况下，可以使用纯XML解决方案对行进行实际编号。

如果MyRootElement是一个数组，您总是可以执行类似（working fiddle）的操作：

<List items="{/MyRootElement}">
    <StandardListItem title="{name}" 
        counter="{= ${/MyRootElement}.indexOf(${}) + 1 }" />
</List>

如果它是一个对象（即类似地图的结构），那么您将需要使用Object.values()函数。它提供了正确的编号，因为它保证以与for ... in循环相同的顺序给出值，Model实际上用它来创建绑定并最终创建列表项。应该注意，IE中不支持Object.values()功能，可能需要填充。示例（和working fiddle）：

<List items="{/MyRootElement}">
    <StandardListItem title="{name}" 
        counter="{= Object.values(${/MyRootElement}).indexOf(${}) + 1 }" />
</List>

稍后编辑：绑定路径说明

在代码示例中，我使用${}构造来访问当前未命名模型的绑定上下文数据对象。

与构建绑定路径相关的规则如下（as specified in the documentation）：

型号名称后跟>符号。如果跳过此部分，则使用未命名（默认）模型。 >符号后面的其余路径用于查找模型中的引用数据。
如果路径以/开头，则它是绝对路径（引用的数据查找是从模型的根对象执行的）。否则，它是一条相对路径。
相对路径与最近的祖先控件的绑定路径连接，该控件具有模型的绑定上下文。如果得到的路径仍然是相对的，则递归地重复该路径直到获得绝对路径。
对于JSON模型，路径由/符号拆分，然后使用从此拆分中获取的属性名称遍历JSON对象树。

具体地说，在${}的情况下，绑定路径本身就是＆＃39;＆＃39; （一个空字符串）。使用上面的规则，这将是未命名（默认）模型的相对路径。由于路径为空，因此不会进行任何属性遍历（因为路径拆分后没有获得路径组件）。

同样，对于命名模型，${MyModelName>}表达式绑定具有相同的效果。

Answer 2

我不知道表中的任何计数器，但是解决方法可能是使用工厂函数并从行id获取行号：

这里DEMO使用Northwind，这里是片段：

＆＃13;

<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_bluecrystal'
			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">
			<Page>
  			<Table items="{path:'/Orders', factory: '.createRow'}">
          <columns>
              <Column>
                  <Text text="#"/>
              </Column>
              <Column>
                  <Text text="Order ID"/>
              </Column>
          </columns>
        </Table>
			</Page>
		</mvc:View> 
    </script>


		<script>
			// define a new (simple) Controller type
			sap.ui.controller("my.own.controller", {
			  createRow: function (sId, oContext) {
			    console.log(sId);
			    console.log(oContext);
			    
			    var rowNumber = sId.split("-")[sId.split("-").length-1];
			    
			    var oRow = new sap.m.ColumnListItem({
            cells: [
              new sap.m.Text({
                text: rowNumber
              }),
              new sap.m.Text({
                text: {path: "OrderID"}
              })
            ]
          })
          
          return oRow;
      	}
			});
			
			
	
			/*** THIS IS THE "APPLICATION" CODE ***/
			// create a Model and assign it to the View
			// Using here the HEROKU Proxy to avoid a CORS issue
			var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access
			var oNorthwindModel = new sap.ui.model.odata.ODataModel(uri, {
				maxDataServiceVersion: "2.0"
			}); 
			// instantiate the View
			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
			// Set the OData Model
			myView.setModel(oNorthwindModel);
			
			
			myView.placeAt('content');
		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>

＆＃13;

在SAPUI5列表控件中通过XML视图显示计数器/索引

2 个答案:

稍后编辑：绑定路径说明