CODEWITHSUNDEEP
sapui5
akris
akris

Reputation: 57

how to bind control to json model in sapui

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

Upvotes: 0

Views: 13748

Answers (2)

Breakpoint
Breakpoint

Reputation: 1541

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

  1. 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. */ } }

  2. 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;

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

Upvotes: 1

Qualiture
Qualiture

Reputation: 4920

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

Upvotes: 4

Related Questions