使用聲明性支持將項目添加到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

回答

相關問題