binding is not working in javascript model

Question

I created javascript view

 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");
               }                   
          })
          */
        ]

    });
}

});

and controller

   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);

}

});

The binding is not working Did I miss something ?

Yes, remove the slashes preceding {/iconTaskSource} and {/taskName}. Since your List is bound to {/modelData}, the list items should be bound relatively to this node. — Qualiture
– Qualiture, Commented Nov 4, 2014 at 9:06
also I didn't see the path attribute in the API of sap.m.list so maybe i need to delete it ? — user1365697
– user1365697, Commented Nov 4, 2014 at 10:43
in my opinion you should bind the model to the list, not to the view.. does it work if you got it all the code in the view? — dotchuZ
– dotchuZ, Commented Nov 4, 2014 at 10:44
@Zyrex - can you show me an example ? I didn't understand how to bind the model to the list — user1365697
– user1365697, Commented Nov 4, 2014 at 10:45

sakthi · Accepted Answer · 2014-11-04 11:31:58Z

2

Try running this code snippet.

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>

Check this for the fixed version of your code http://jsbin.com/kequme/1/edit

edited Nov 4, 2014 at 11:31

answered Nov 4, 2014 at 11:06

sakthi

9296 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1365697 Over a year ago

thanks , If I don't want to do it with template how I can do the binding ?

sakthi Over a year ago

Then, you have to manually enter the binding path for all the list items. Ex - {/modelData/0/taskName}

user1365697 Over a year ago

can you show me an example example without template or how I can fix my example ? Did the binding in the list to path parameter is correct ?

user1365697 Over a year ago

Where do I need to add the binding path for the list item in which element ?

sakthi Over a year ago

You should have given the binding path as {/modelData/0/taskName} & {/modelData/1/taskName} instead of {/taskName}.

Leandro Müller · Accepted Answer · 2015-07-01 19:40:34Z

0

You neeed to include data-sap-ui-xx-bindingSyntax="complex" in index.html file. Look:

<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>

answered Jul 1, 2015 at 19:40

Leandro Müller

1

Collectives™ on Stack Overflow

binding is not working in javascript model

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related