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

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>