2017-09-28 4 views
0

私は現在、SAP UI5を学んでいると私はsap.m.Selectでアイテムを表示する方法についての十分な情報を見つけることができなかった、私がやりたいことから項目を示していますドロップダウンとしての私自身の配列と同じようにそれらのすべてにアンカーリンクを追加します。樹液-selectで配列項目を表示し、アイテムにアンカータグを追加する

var myMenuItems = ["foo","bar","baz"]; 

私はSelect Menuを構築するために管理が、それは今空に見えますので、項目を追加する方法を見つけるdidntの。

私の選択のための私のコードは次のとおりです。

new sap.m.Select(this.createId("selector"), { 
       name:"selectName", 
       selectedKey: "foo", 
       icon: "sap-icon://navigation-down-arrow", 
       valueState:"Success", 
       valueStateText:"random text idk what for", 
       forceSelection:false 
      }) 

にはどうすればmyMenuItemsの項目を押すと、このSelectでそれらを表示することができますか?

+0

あなたのメニュー項目を含むモデルを必要として、あなたの選択:) –

+1

にこのモデルをバインドイマイチそこのような任意の機能配列内のすべての項目を繰り返してビューに追加しますか? VueやAngularなどのように。 – Atlas

答えて

2

sap.m.Selectは非常に強力なコントロールです。灰が言ったようにモデルが必要です。 はここにあなたのケースのための実施例である:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta charset="utf-8"> 
    <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
      id="sap-ui-bootstrap" 
      data-sap-ui-libs="sap.m" 
      data-sap-ui-theme="sap_belize"></script> 
    <script> 
     var oData = { 
      MenuItems: [{id: 1,name: "foo"},{id: 2,name: "bar"},{id: 3,name: "baz"}] 
     }; 
     var oModel = new sap.ui.model.json.JSONModel(oData); 
     var oSelect = new sap.m.Select({ 
      id: "selector", 
     }); 
     var oItemSelectTemplate = new sap.ui.core.Item({ 
      key: "{id}", 
      text: "{name}" 
     }); //Define the template for select items 
     oSelect.setModel(oModel);// set model to Select element 
     oSelect.bindAggregation("items", "/MenuItems", oItemSelectTemplate); //bind aggregation with the template to items 
     oSelect.placeAt('content'); 
    </script> 
</head> 
<body id="content" class="sapUiBody"> 
</body> 
</html> 
1

アッシュKanderが右である、あなたは、データを格納するためのモデルを作成する必要があります。

https://sapui5.hana.ondemand.com/#/topic/e5310932a71f42daa41f3a6143efca9c

を簡単にまとめとして、あなたがモデルを作成することができますし、設定:SAP UI5 SDKのセクションを結合

データは、それを行うと、あなたの選択にそれをバインドする方法する方法をお見せしなければなりませんそれを選択しているビューに関連付けられたコントローラのOnInit方法における選択に:

var oMenuItemsModel = new sap.ui.model.json.JSONModel({ 
 
    "menuItems": [ 
 
    {"item": "foo"}, 
 
    {"item": "bar"}, 
 
    {"item": "baz"} 
 
    ] 
 
}); 
 
this.getView().setModel(oMenuItemsModel, "myMenuItems");

<Select items="{myMenuItems>/menuItems}"> 
    <core:Item key="{myMenuItems>item}" text="{myMenuItems>item}" />        
</Select> 

そして、それが動作するはずです。

これは基本的にすべてのSDK上のコードサンプルから取られる:

https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.Select/code

+0

sapページに表示されるすべての例は、XMLビューを使用して行われますが、JSビューを使用する必要があります – Atlas