sapui5
집계 바인딩

매개 변수

xmlview에서 템플릿을 사용하는 집계 바인딩

XmlView :

<mvc:View
    controllerName="sap.m.sample.ListCounter.List"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <List
        headerText="Products"
        items="{products>/Products}">
        <!-- Template of the list item -->
        <StandardListItem
            title="{Name}"
        />
    </List>
</mvc:View>

제어 장치:

sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel'
    ], function(jQuery, Controller, JSONModel) {
    "use strict";
 
    var ListController = Controller.extend("sap.m.sample.ListCounter.List", {
 
        onInit : function (evt) {
            // Model
            var oModel = new JSONModel("/products.json"));
            this.getView().setModel(oModel,"products");
        }
    });
 
 
    return ListController;
 
});

products.json :

{ 
    Products : [
        {"Name": "Product 1"},
        {"Name": "Product 2"},
        {"Name": "Product 3"},
        ]
}

정렬 및 정적 필터를 사용하는 집계 바인딩

<mvc:View
    controllerName="sap.m.sample.ListCounter.List"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <List
        headerText="Fruits"
        items="{path:'products>/Products', sorter:{path:'Name'}, filter:{path:'Type', operator:'EQ',value1:'Fruit'}}">
        <!-- Template of the list item -->
        <StandardListItem
            title="{Name}"
        />
    </List>
    <List
        headerText="Food"
        items="{path:'products>/Products', sorter:{path:'Name'}, filter:{path:'Type', operator:'EQ',value1:'Food'}}">
        <!-- Template of the list item -->
        <StandardListItem
            title="{Name}"
        />
    </List>
</mvc:View>

제어 장치:

sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel'
    ], function(jQuery, Controller, JSONModel) {
    "use strict";
 
    var ListController = Controller.extend("sap.m.sample.ListCounter.List", {
 
        onInit : function (evt) {
            // Model
            var oModel = new JSONModel("/products.json"));
            this.getView().setModel(oModel,"products");
        }
    });
 
 
    return ListController;
 
});

products.json :

{ 
    Products : [
        {"Name": "Banana", "Type": "Fruit"},
        {"Name": "Meat", "Type":"Food"},
        {"Name": "Apple", "Type": "Fruit"},
        {"Name": "Rice", "Type": "Food"},
        ]
}

팩토리 함수로 집계 바인딩

XmlView :

<mvc:View
    controllerName="sap.ui.demo.wt.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true">
    <App>
        <pages>
            <Page content="{path:'Tiles>/Tiles',factory:'.tileFactory'}">
                
            </Page>
        </pages>
    </App>
</mvc:View>

제어 장치:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";

    return Controller.extend("sap.ui.demo.wt.controller.App", {

        onInit: function(){
            var oModel  = new JSONModel("./model/data.json");
            
            this.getView().setModel(oModel,"Tiles");
        },
        tileFactory: function(sId,oContext){
            var oUIControl = null;
            
            var type = oContext.getProperty("type");
            
            switch(type){
                case "STD":
                    var title = oContext.getProperty("Title");
                    oUIControl = new sap.m.StandardTile();
                    
                    oUIControl.setTitle(title);
                    break;
                case "NEWS":
                    var title = oContext.getProperty("Title");
                    var newsContent = new sap.m.NewsContent({contentText:title});
                    oUIControl = new sap.m.GenericTile();
                    oUIControl.addTileContent(new sap.m.TileContent({content:newsContent}));
                    break;
                case "IMG":
                    var src = oContext.getProperty("src");
                    var imgContent = new sap.m.ImageContent({src});
                    oUIControl = new sap.m.GenericTile();
                    oUIControl.addTileContent(new sap.m.TileContent({content:imgContent}));
                    break;
            }
            
            return oUIControl;
        
        }
    });

});

data.json :

{
    "Tiles":[
        {
        "type": "STD",
        "Title": "Standard Tile"
        },
        {
        "type": "NEWS",
        "Title": "NEWS Tile"
        },
        {
        "type": "IMG",
        "src": "https://1.bp.blogspot.com/-2YLGmdxqXMk/V58ki-s5DLI/AAAAAAAANhs/jcSRMEeJN_89vXNdrie1jDGFhF5X-yh4ACLcB/s1600/ui5.png"
        }
        ]
}