使用声明性支持将项目添加到sap.m.list

我想使用声明支持将项目添加到列表中。例如：使用声明性支持将项目添加到sap.m.list

这是我的代码。我希望把列表元素在标记saysing：

  // I want to insert elements here......

感谢

 <!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 

</head> 

<body> 
<script id='sap-ui-bootstrap' 
     type='text/javascript' 
     src='https://openui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js' 
     data-sap-ui-libs="sap.ui.commons,sap.m" 
     data-sap-ui-modules='sap.ui.core.DeclarativeSupport' 
> 
</script> 


      <div data-sap-ui-type='sap.m.ListBase' > 
       <div data-sap-ui-aggregation="content"> 
       // I want to insert elements here...... 
       </div> 
      </div> 


    <div data-sap-ui-type='sap.ui.ux3.NavigationBar'> 
     <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1"data-text="Item with some text 3"></div> 
     <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1" data-text="Item with some text 3"></div> 
     <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1" data-text="Item with some text 3"></div> 
     </div> 
</div> 
</body> 

</html>

来源

2016-11-10 Matoy

我想这个问题没有关于这个问题的文档，因为重点明确地放在了XML视图上。请提供一个运行的例子，否则很难回答。 – matbtt

更新我的回答 – Matoy

你想插入哪些项目？ NavigationItems？ – matbtt

下面是declaritive支持两个例子（HTML标签被遗漏）。

第一条显示导航栏你想：

<head> 
     <script id="sap-ui-bootstrap" 
      type="text/javascript" 
      src="resources/sap-ui-core.js" 
      data-sap-ui-xx-bindingSyntax="complex" 
      data-sap-ui-modules="sap.ui.core.DeclarativeSupport"> 
     </script> 
     <script> 
      sap.ui.getCore().attachInit(function() { 
       var navbar = sap.ui.core.DeclarativeSupport.compile(document.getElementById("navbar")); 
      }); 
     </script> 
    </head> 
    <body class="sapUiBody" id="content"> 
    </body> 
    <div id="navbar"> 
     <div data-sap-ui-type="sap.ui.ux3.NavigationBar"> 
      <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1"data-text="Item with some text 3"></div> 
      <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1" data-text="Item with some text 3"></div> 
      <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1" data-text="Item with some text 3"></div> 
     </div> 
    </div>

第二个使用List与StandardListItem和模型绑定：

<head> 
     <script id="sap-ui-bootstrap" 
      type="text/javascript" 
      src="resources/sap-ui-core.js" 
      data-sap-ui-xx-bindingSyntax="complex" 
      data-sap-ui-modules="sap.ui.core.DeclarativeSupport"> 
     </script> 
     <script> 
      sap.ui.getCore().attachInit(function() { 
       var list = sap.ui.core.DeclarativeSupport.compile(document.getElementById("list")); 
       sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel({ 
        "items" : [ 
         { "name" : "Test" }, 
         { "name" : "Declaritive Support"}] 
       }), "data"); 
      }); 
     </script> 
    </head> 
    <body class="sapUiBody" id="content"> 
    </body> 
    <div id="list"> 
     <div data-sap-ui-type="sap.m.List" data-items="{data>/items}"> 
      <div data-sap-ui-aggregation="items"> 
       <div data-sap-ui-type="sap.m.StandardListItem" data-title="{data>name}"></div> 
      </div> 
     </div> 
    </div>

更多细节可以发现here。请注意，您不能使用ListBase，因为它只是列表样式控件的一个基本实现，例如列表或表格。也有可能跳过定义聚合的div，因为UI5具有默认聚合的概念，在这种情况下是项目。这也可以在第一个例子中看到。

来源

2016-11-14 14:07:28 matbtt

回答

相关问题