绑定在javascript模型中不起作用

时间:2014-11-04 08:26:23

标签: sapui5

我创建了javascript视图

 sap.ui.jsview("view.taskListView", {

/** Specifies the Controller belonging to this View. 
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf view.taskListView
*/ 
getControllerName : function() {
    return "view.taskListView";
},

/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
* Since the Controller is given to this method, its event handlers can be attached right away. 
* @memberOf view.taskListView
*/ 
createContent : function(oController) {

    var oLabel = new sap.m.Label("l1",{ text :"Weekly Tasks", textAlign:"Center", width:"100%"}); 
  //  var oList = new sap.m.List({noDataText:"No data", items:"{/modelData}"});


   var oList=  new sap.m.List({    // define List Control

     //   mode: "MultiSelect",    // multi selection mode
    columns : [
        new sap.m.Column({  // first column
    }), 
    new sap.m.Column({  // second column
    })
], 
items : [
    new sap.m.ColumnListItem({  // first row
        type : "Navigation",
        //selected : true,    // first item is selected (from ListItemBase)
        cells : [
            new sap.ui.core.Icon({
                src : "{/iconTaskSource}",
                size : "1.5em"
            }),
            new sap.m.Text({       // second cell related to second column definition
                text : "{/taskName}"  
            })
        ]
    }),
    new sap.m.ColumnListItem({  // second row
       type : "Navigation",
        cells : [
            new sap.ui.core.Icon({
                src : "{/iconTaskSource}",
                size : "1.5em"

            }),
            new sap.m.Text({       // second cell related to second column definition
                text : "{/taskName}"
            })
        ]
    })  
]
  });


    return new sap.m.Page({
        title: "Title",
        content: [
            oLabel , oList
            /*
            new sap.m.Button({
               text:"Go to Page2",
               tap: function(){
                    //app.to("abc.SecondPage");
                    alert("Hello");
               }                   
          })
          */
        ]

    });
}

});

和控制器

   sap.ui.controller("view.weeklyTasks", {

onInit: function() {



   var aData2 = { modelData : [ 

      {iconTaskSource:"icon1", taskName: "task1"},
      {iconTaskSource:"icon2", taskName: "task2"}


    ]};


  var oModel = new sap.ui.model.json.JSONModel(aData2);
  this.getView().setModel(oModel2);

}

});

绑定无效 我错过了什么吗?

2 个答案:

答案 0 :(得分:2)

尝试运行此代码段。



sap.ui.jsview("view.taskListView", {

            getControllerName: function() {
                return "view.taskListView";
            },


            createContent: function(oController) {

                var oLabel = new sap.m.Label("l1", {
                    text: "Weekly Tasks",
                    textAlign: "Center",
                    width: "100%"
                });
                var oList = new sap.m.List({ // define List Control
                    columns: [
                        new sap.m.Column({ // first column
                        })
                    ]
                });
                var oTemplate = new sap.m.ColumnListItem({
                    type: "Navigation",
                    cells: [
                        new sap.m.Text({
                            text: "{taskName}"
                        })
                    ]
                });
                oList.bindItems('/modelData', oTemplate);
                return new sap.m.Page({
                    title: "Title",
                    content: [
                        oLabel, oList
                    ]

                });
            }
        });

        sap.ui.controller("view.taskListView", {

            onInit: function() {

                var aData2 = {
                    modelData: [

                        {
                            iconTaskSource: "icon1",
                            taskName: "task1"
                        }, {
                            iconTaskSource: "icon2",
                            taskName: "task2"
                        }
                    ]
                };

                var oModel = new sap.ui.model.json.JSONModel(aData2);
                this.getView().setModel(oModel);
            }
        });

        var oApp = new sap.m.App();
        var myView = sap.ui.view({
            type: sap.ui.core.mvc.ViewType.JS,
            viewName: "view.taskListView"
        });
        oApp.addPage(myView);
        oApp.placeAt('content');

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <title>test</title>

    <script id='sap-ui-bootstrap' type='text/javascript' src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m'></script>

</head>

<body class='sapUiBody'>
    <div id='content'></div>
</body>

</html>
&#13;
&#13;
&#13;

选中此代码以获取代码的固定版本http://jsbin.com/kequme/1/edit

答案 1 :(得分:0)

你需要包含数据-sap-ui-xx-bindingSyntax =&#34; complex&#34;在index.html文件中。 看:

<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
    </script>