how to bind control to json model in sapui

Question

why can't i use these sap.ui.getCore().setModel(oModel) and this.getView().setModel("oModel","someModel") in functions other than life cycle hooks of controller in sapui5.

I am trying to bind model to the controls of my view without giving it an id. so i want to make a model and set that model to the view where i will bind.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">

        <title>Handler Context in JavaScript Views</title>

        <script id="sap-ui-bootstrap" 
                type="text/javascript"
                src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-libs="sap.m"
                data-sap-ui-xx-bindingSyntax="complex"
        >
        </script>

        <script>
            jQuery.sap.require("sap.m.MessageToast");
            sap.ui.jsview("local.view", {
                getControllerName: function() {
                    return "local.controller";
                },
                createContent: function(oController) {                    
					var oText=new sap.m.Text();
					oText.bindProperty("text","oModel>/myData");
					
					var oInput=new sap.m.Input();
					oInput.bindValue("oModel>/myData");
					
					var oIn=new sap.m.Input();
					oIn.bindValue("oModel>/myData");
					
					var oBar=new sap.m.Bar({contentLeft:oIn,contentMiddle:oText});
					var oButton=new sap.m.Button({text:"press to reset",
								press:function(){
									oController.resetModel();
								}
								});
					var oPage=new sap.m.Page({headerContent:[oInput],footer:oBar,showNavButton:true,content:[oButton]});
					var oShell=new sap.m.App({pages:oPage});
					return oShell;
                }
            });
			
			
			
            sap.ui.controller("local.controller", {
				onInit:function(){
					var aData={"myData":"enter!!"};
					
					var oModel=new sap.ui.model.json.JSONModel();
					oModel.setData(aData);
					sap.ui.getCore().setModel(oModel,"oModel");
				},
				resetModel:function(){
					var oModel=sap.ui.getCore().getModel("oModel");
					oModel.oData.myData="Reset";				
				}
            });
            sap.ui.view({
                type: sap.ui.core.mvc.ViewType.JS,
                viewName: "local.view"
            }).placeAt("uiArea");
        </script>

    </head>

    <body class="sapUiBody" role="application">
        <div id="uiArea"></div>
    </body>
</html>

how can i update my model which is bound to other controls on button press

Is there any way to access controls in controller of my view without giving it an id?
Regards, Ajaay

You can definitely use these function calls inside a view or a controller. Maybe this.getView().setModel... is not working because you are inside the wrong context. In other words 'this' might be pointing to an object different than the one you're thinking. Could you please post the code of your view and controller? — fabiopagoti
– fabiopagoti, Commented Nov 20, 2014 at 21:49

Qualiture · Accepted Answer · 2014-11-21 09:18:34Z

4

You are updating your model incorrectly.

Remember, you should never ever use the internal <yourModel>.oData.<yourProperty> = <whatever>, but instead always use: <yourModel>.setProperty("<propertyName>", <value>). That way you will be absolutely certain your model will be updated with the new values

Change your resetModel method to

resetModel:function(){
    var oModel=sap.ui.getCore().getModel("oModel");
    oModel.setProperty("/myData", "Reset");             
}

and it will work

answered Nov 21, 2014 at 9:18

Qualiture

4,9207 gold badges29 silver badges39 bronze badges

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

3 Comments

akris Over a year ago

Thanks Qualiture i got it working.Can you please explain why should not i use <yourModel>.oData.<yourProperty> = <whatever>

Qualiture Over a year ago

If you use <yourModel>.oData.<yourProperty> = <whatever>, you are in essence updating only the internal representation of the model. I.e., the internal values are updated, but this update is unknown to the outside world. When using the setData() or setProperty() methods, this will not only update your model (the oData.<whatever> property will be updated like you have done as well), but depending on the binding type it will also notify any bound controls of the update, and reflect the changes accordingly

akris Over a year ago

Thanks Qualiture for explaining i got it now :)!

Breakpoint · Accepted Answer · 2014-11-21 09:26:12Z

There are quite a few questions that you have asked here, so let me break it down

Why can't i use these sap.ui.getCore().setModel(oModel) and this.getView().setModel("oModel","someModel") in functions other than life cycle hooks of controller in sapui5. - You can access them

I'm not sure of where exactly you are facing an issue to use sap.ui.getCore().setModel(oModel), but for this.getView().setModel("oModel","someModel") I can say what @fabiopagoti has commented, that you are probably using it in the wrong context. Here's anexample,

onInit : function() { /* 'this' refers to the controller here, */ var oController = this; myOwnFunction : function() { /* 'this' now refers to the scope inside 'onInit' Therefore this.getView().setModel() won't work. oController.getView().setModel() will work. */ } }
Is there any way to access controls in controller of my view without giving it an id? - Yes, only if the View is a JavaScript view

In your view.js instead of declaring a variable as,

var oVariable;

Declare it as,

this.oVariable;

And anywhere you need to access it in the controller.js (inside the controller's context) access the variable as,

this.getView().oVariable;
How can i update my model which is bound to other controls on button press

resetModel:function() { var oModel=sap.ui.getCore().getModel("oModel"); oModel.setProperty("/myData", "Reset" ); }

The setProperty documentation is here

Collectives™ on Stack Overflow

how to bind control to json model in sapui

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related