cancel
Showing results for 
Search instead for 
Did you mean: 

How to change model data of a view from another view?

Former Member
0 Kudos

viewtest is bound to a JSONModel. View2 is bound to the same JSONModel by creating a reference to viewtest and setting the model to viewtest.getModel().

What I'm trying to do is modify the shared model data in View3 by clicking a button so that the texts in textfield and textview will change automatically. However, the texts in textfield and textview remain "This is a text". What's the problem?

The index.html file:


<script>

  sap.ui.localResources("viewtest");

  var view = sap.ui.view({viewName:"viewtest.viewtest", type:sap.ui.core.mvc.ViewType.JS});

  var view2 = sap.ui.view({viewName: "viewtest.View2", type: sap.ui.core.mvc.ViewType.JS});

  var view3 = sap.ui.view({viewName: "viewtest.View3", type: sap.ui.core.mvc.ViewType.JS});

  view.placeAt("content");

  view2.placeAt("content2");

  view3.placeAt("content3");

  </script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  <div id="content2"></div>

  <div id="content3"></div>

  </body>


sap.ui.jsview("viewtest.viewtest", {

  getControllerName : function() {

  return "viewtest.viewtest";

  },

  createContent : function(oController) {

  this.setModel(new sap.ui.model.json.JSONModel());

  var oData = {

  text: "this is a text"

  };

  this.getModel().setData(oData);

  var oTextField = new sap.ui.commons.TextField({value: "{/text}"});

  return [oTextField];

  }

});


sap.ui.jsview("viewtest.View2", {

  getControllerName : function() {

  return "viewtest.View2";

  },

  createContent : function(oController) {

  var viewtest = sap.ui.view({viewName: "viewtest.viewtest", type:sap.ui.core.mvc.ViewType.JS});

  this.setModel(viewtest.getModel());

  this.getModel().setData(viewtest.getModel().getData());

  var oTextView = new sap.ui.commons.TextView({text: "{/text}"});

  return [oTextView];

  }

});


sap.ui.jsview("viewtest.View3", {

  getControllerName : function() {

  return "viewtest.View3";

  },

  createContent : function(oController) {

  var oButton = new sap.ui.commons.Button({text:"click", press: func});

  function func() {

  var oView = new sap.ui.view({viewName:"viewtest.viewtest", type:sap.ui.core.mvc.ViewType.JS});

  oView.getModel().setData({text:"hello world"}, true);

  }

  return [oButton];

  }

});

Accepted Solutions (1)

Accepted Solutions (1)

Qualiture
Active Contributor
0 Kudos

Well, this is not how you share a model across views... you should create one model on the core, i.e.  sap.ui.getCore().setModel(...) and use that across your views.

Also it is considered bad practice to code logic in your views, that should all be done in the controller.

Also, why use 3 different content <div> elements?

EDIT: reason why it does not update is because you set a model to a view 9which comes from another view) but you only change the local view's model

Former Member
0 Kudos

More than one people have pointed it out to me that I should use global model to share data between views.

The code is just for demonstration purpose, so I didn't consider too much about the best practice.

Anyway, thank you for the helpful advice.

Answers (1)

Answers (1)

Former Member
0 Kudos

Hi Zhengquan,

Attach your datamodel to the core using something like this-

var oModel = new sap.ui.model.json.JSONModel("oModel");

then set your model "oModel" to the core like Robin van het Hof said, using sap.ui.getCore.setModel("oModel")


Cheers,

-NK

Former Member
0 Kudos

I'll do that. Thank you.