How to properly use JSONModel and setModel?

Question

I'm trying to create an example screen using SAP Web IDE where clicking different buttons changes different texts around the screen. I have a few functions at the App.controller.js and the code is this (All the functions do the same for now but affect different text areas):

onPressButton2: function () {
  var oData = {
    text: {
      line1: "line1",
      line2: "line2",
      line3: "line3",
      line4: "line4"
    }
  };
  var oModel = new JSONModel(oData);
  this.getView().setModel(oModel);
},

And this is corresponding part at the XML:

<items>
  <Text xmlns="sap.m" text="{/text/line1}" id="text1"/>
  <Text xmlns="sap.m" text="{/text/line2}" id="text2"/>
  <Text xmlns="sap.m" text="{/text/line3}" id="text3"/>
  <Text xmlns="sap.m" text="{/text/line4}" id="text4"/>
</items>

This works, but when I try and change different areas of the screen, the previous changes I made by clicking the buttons disappear. I assume this is because I use setModel anew every time which overwrites it but I cannot find the proper usage.

Should I create a different js file for every section in the screen?
Is there a way to update the model instead of overwriting it all?

Answer 1

Try to declare your JSONModel outside of the onPressButton function. You can declare it in the manifest to be visible for the entire application (controllers and views):

"sap.ui5": {
    "_version": "1.1.0",
    ...
    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel",
            "uri": "i18n/i18n.properties"
        },
        "MyModel" : {
            "type" : "sap.ui.model.json.JSONModel"
        }

Once the model is available you can set the data to it outside of the onPressButton2 function:

this.getOwnerComponent().getModel("MyModel").setData(oData)

Now, in the onPressButton2 function, you can just update the model's data using the setProperty method:

this.getOwnerComponent().getModel("MyModel").setProperty("/text/line1", "NewValue");

Answer 2

I think what you are searching are named models. with named models you are able create different models without overwriting them, if you want to additionally add a new model.

var oModel = new JSONModel(oData);
this.getView().setModel(oModel, "model1");

have a look at the second parameter in the setmodel method. now you can access them in the view with

<items>
  <Text xmlns="sap.m" text="{model1>/text/line1}" id="text1"/>
  <Text xmlns="sap.m" text="{model1>/text/line2}" id="text2"/>
  <Text xmlns="sap.m" text="{model1>/text/line3}" id="text3"/>
  <Text xmlns="sap.m" text="{model1>/text/line4}" id="text4"/>
</items>