sap ui DataBinding -기초

-view.xml-

<mvc:View controllerName="s09.zse0709.controller.View1"

    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"

    xmlns="sap.m"

>

<Page id="page" title="{i18n>title}">

    <content>

        <Table items="{/aEmp}">

            <!-- Header -->

            <columns>

                <Column><header><Text text="Employee Number" /></header></Column>

                <Column><header><Text text="Employee Name" /></header></Column>

            </columns>

            <!-- Item -->

            <items>

                <ColumnListItem press="onColumn" type="Active">

                    <cells>

                        <Text text = "{eNo}" />

                        <Text text = "{eName}" />

                    </cells>

                </ColumnListItem>

            </items>

        </Table>

        <Table id="idSkillTable" items="{/aSkill}">

            <!-- Header -->

            <columns>

                <Column><header><Text text="Skill ID" /></header></Column>

                <Column><header><Text text="Skill Name"   /></header></Column>

                <Column><header><Text text="Skill No"    /></header></Column>

            </columns>

            <!-- Item -->

            <items>

                <ColumnListItem>

                    <cells>

                        <Text text = "{sId}" />

                        <Text text = "{sName}" />

                        <Text text = "{eNo}" />

                    </cells>

                </ColumnListItem>

            </items>

        </Table>

    </content>

</Page>

</mvc:View>

 

 

-view.js-

sap.ui.define([

    "sap/ui/core/mvc/Controller",

    "sap/ui/model/json/JSONModel",

    "sap/ui/model/Filter"

],

    /**

     * @param {typeof sap.ui.core.mvc.Controller} Controller

     */

    function (Controller,  JSONModel, Filter) {

        "use strict";

 

        return Controller.extend("s09.zse0709.controller.View1", {

            onInit: function () {

                let oData = {

                    aEmp: [

                        { eNo :"E001", eName:"Lee" },

                        { eNo :"E002", eName:"Han" }

                    ],

                    aSkill: [

                        { sId: "S001", sName: "ABAP",   eNo:"E001" },

                        { sId: "S001", sName: "ABAP" ,  eNo:"E002" },

                        { sId: "S003", sName: "WD4A",   eNo:"E002" },

                        { sId: "S003", sName: "SAPUI5", eNo:"E002" }

                    ]

                };

                /**

                 * model.addAttribute()

                 */

                let oModel = new JSONModel();

                oModel.setData( oData );

                this.getView().setModel(oModel);

 

            },

//이때 oEvt에는 해당 xml 에서의 press 당시의 기능을 포함하고 있음.

 

            onColumn: function(oEvt){

                let selItem = oEvt.getSource().getBindingContext(); // /aEmp/0

                console.log("oEvt.getSource() ==" + oEvt.getSource());

                console.log("oEvt.getSource().getBindingContext() = " + selItem );

 

                let oModel = this.getView().getModel();

                console.log("oModel : " + oModel);

                let selEno = oModel.getProperty("eNo", selItem);  // E001    .getProperty("찾으려는 list 속성값", "주소값")

                console.log("selEno : " + selEno);

                let oSkillTable = this.getView().byId("idSkillTable");

                console.log("oSkillTable : " + oSkillTable); //Element sap.m.Table#application-s09zse0709-display-component---View1--idSkillTable

 

                /**

                * Filter (" ", " ", " ")

                * new sap.ui.model.Filter(vFilterInfo, vOperator?, vValue1?, vValue2?)

                *     

                let oFilter = new Filter("eNo", "EQ", selEno ); // 포인터가 있는 ENo 속성 과 같은 값을 가짐.

                console.log("oFilter : " + oFilter);

                oSkillTable.getBinding("items").filter(oFilter); //"idSkillTable의 items를 가져온다. filter() 

            }

        });

    });