Как правильно использовать JSONModel и setModel?

Я пытаюсь создать пример экрана с помощью SAP Web IDE, где нажатие разных кнопок изменяет разные тексты на экране. У меня есть несколько функций в App.controller.js, и код такой (все функции пока делают одно и то же, но влияют на разные текстовые области):

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

И это соответствующая часть в 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>

Это работает, но когда я пытаюсь изменить разные области экрана, предыдущие изменения, которые я сделал, нажимая кнопки, исчезают. Я предполагаю, что это потому, что я использую setModel каждый раз заново, что перезаписывает его, но я не могу найти правильное использование.

Должен ли я создавать разные файлы js для каждого раздела на экране?
Есть ли способ обновить модель, а не перезаписывать ее целиком?


person Soraky    schedule 10.03.2019    source источник


Ответы (3)


Я думаю, что вы ищете названные модели. с именованными моделями вы можете создавать разные модели, не перезаписывая их, если вы хотите дополнительно добавить новую модель.

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

взгляните на второй параметр в методе setmodel. теперь вы можете получить к ним доступ в представлении с помощью

<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>
person DubZ    schedule 10.03.2019

Попробуйте объявить JSONModel вне функции onPressButton. Вы можете объявить его в манифесте видимым для всего приложения (контроллеры и представления):

"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"
        }

Как только модель будет доступна, вы можете установить для нее данные вне функции onPressButton2:

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

Теперь в функции onPressButton2 можно просто обновить данные модели с помощью метода setProperty:

this.getOwnerComponent().getModel("MyModel").setProperty("/text/line1", "NewValue");
person fareslt    schedule 10.03.2019
comment
Спасибо за ваш вклад, я понимаю идею, стоящую за ней, но не могу заставить ее работать даже после некоторой возни. Моя проблема в том, что я не могу получить доступ к MyModel даже после объявления ее в манифесте. Не через this.getOwnerComponent().getModel(MyModel).setData(oData) или this.getOwnerComponent().getModel(MyModel).setProperty(/text/line1, NewValue); - person Soraky; 10.03.2019
comment
Вы пытаетесь получить доступ к модели onInit() контроллера? Если да, то это не сработает. Объявите свою модель в манифесте, как уже упоминалось в предыдущем ответе, и получите к ней доступ в событии RouteMatched контроллера с помощью this.getView().getModel(modelName) - person Geraldo Megale; 10.03.2019
comment
если вы хотите использовать модель только для этого самого представления, я предлагаю не объявлять ее в манифесте, поскольку это подразумевает, что модель актуальна для всего приложения. См. ответ DubZ, чтобы узнать, как создавать именованные модели. - person Erch; 11.03.2019
comment
Сначала я объявил это в манифесте, но все еще не мог получить к нему доступ. Я пытаюсь понять, почему я не мог прямо сейчас. Что касается ответа DubZ, он отлично работает и был именно тем, что я искал. - person Soraky; 11.03.2019

Вы должны создать свою модель на этапе внедрения жизненного цикла страницы. Итак, в вашем случае создайте модель и начальные значения в функции onInit соответствующего представления/страницы:

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

Затем, когда вам нужно присвоить этой модели разные значения для существующих значений, вы просто установите соответствующее свойство в модели следующим образом:

this.getView().getModel().setProperty("/text/line1", "<new value>");

если вы хотите добавить дополнительную строку, вы можете просто получить существующие значения модели и добавить новое значение:

var mydata =  this.getView().getModel().getProperty("/");
mydata.text["line5"] = "line5";
this.getView().setProperty("/", mydata);

Надеюсь, это поможет. Надеюсь, вы знаете о различиях между безымянной моделью, которую вы использовали, и концепцией именованной модели.

person Bernard    schedule 10.03.2019