Question

我正在尝试使用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文件吗？
有没有一种方法可以更新模型而不是覆盖所有模型？

Answer 1

尝试在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");

Answer 2

您应该在页面生命周期的使用阶段创建模型。因此，在您的实例中，在相关视图/页面的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);

希望有帮助。我相信您知道使用的未命名模型与命名模型的概念之间的区别。

Answer 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>

如何正确使用JSONModel和setModel？

3 个答案: