Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

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

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

  }

});

Tags:
replied

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

2 View this answer in context
Not what you were looking for? View more on this topic or Ask a question