UI5 Databind

总共有三种类型的Data Bind:
1. Property Binding:
    属性的绑定共有三种绑定方法:

        var oTextField = new sap.ui.commons.TextField({value: "{/company/name}"});
        oTextField.bindProperty("value", "/company/name");
        oTextField.bindValue("/company/name");

    格式化结果:
       

   oTextField.bindProperty("value", "/company/title", function(sValue) {
                                    return sValue && sValue.toUpperCase();
                                });
        oControl = new sap.ui.commons.TextField({
                        value: {
                            path:"/company/revenue",
                            formatter: function(fValue) {
                                if (fValue) {
                                    return "> " + Math.floor(fValue/1000000) + "M";
                                }
                                return "0";
                            }
                        }
                    });                    

2. Aggregation Binding:

        var data = [{
                rowInfo:[
                        {
                        chartInfo: [
                            {title: oBundle.getText('Home_DashBoardCahrt_map'), path: 'css/images/chart_map.png'},
                           ]
                        }, {
                           chartInfo: [
                            {title: oBundle.getText('Home_DashBoardCahrt_dso'), path: 'css/images/chart_dso.png'},
                           ]
                        }, {
                           chartInfo: [
                            {title: oBundle.getText('Home_DashBoardCahrt_risk'), path: 'css/images/chart_risk.png'},
                           ]
                        }, {
                           chartInfo: [
                            {title: oBundle.getText('Home_DashBoardCahrt_credit'), path: 'css/images/chart_credit.png'},
                           ]
                        },
                ]}];
            oModel = new sap.ui.model.json.JSONModel(),
            oContentTemplate = new sap.ui.commons.layout.VerticalLayout({
                           width: "99%",
                           content:[
                               new sap.ui.commons.Image({src:'{path}',width:"100%",height:"100px"}),
                               new sap.ui.commons.CheckBox({text:'{title}'}),
                           ],
                       }),
            cellTemplate = new sap.ui.commons.layout.MatrixLayoutCell(),
            oRowTemplate = new sap.ui.commons.layout.MatrixLayoutRow(),
            oMatrixLayout = new sap.ui.commons.layout.MatrixLayout();
                
        oModel.setData(data);
        oMatrixLayout.setModel(oModel);
        cellTemplate.bindAggregation('content', 'chartInfo', oContentTemplate);
        oRowTemplate.bindAggregation('cells', 'rowInfo', cellTemplate);
        oMatrixLayout.bindAggregation('rows', '/', oRowTemplate);

        [总结: 只要是bindAggregation,则path下面的是一个数组, 在最后的绑定上面才是一个对像]
3. Element Binding:

    var data = {clients:[
                      {firstName:"Donald", lastName:"Duck"},
                         items: [ {name: "iPhone"}, {name:"iPad"} ]
                      }
           ]};
        oLB = sap.ui.commons.ListBox("myLb", {height:"100px"}),
        oItemTemplate = new sap.ui.core.ListItem();
        
    oItemTemplate.bindProperty("text", "name");
    oLB.bindAggregation("items", "items", oItemTemplate);
    oLB.bindElement("/clients/0");

 

posted @ 2013-01-25 18:57  海边菩提  阅读(533)  评论(0编辑  收藏  举报