如何正确使用JSONModel和setModel?
How to properly use JSONModel and 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 文件吗?
有没有办法更新模型而不是全部覆盖它?
尝试在 onPressButton
函数之外声明您的 JSONModel
。您可以在清单中声明它对整个应用程序(控制器和视图)可见:
"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");
您应该在页面生命周期的集成阶段创建您的模型。
因此,在您的实例中,在相关 view/page:
的 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);
希望对您有所帮助。
我相信您知道您使用的未命名模型与命名模型概念之间的区别。
我想你搜索的是命名模型。使用命名模型,如果您想另外添加一个新模型,您可以创建不同的模型而无需覆盖它们。
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>
我正在尝试使用 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 文件吗?
有没有办法更新模型而不是全部覆盖它?
尝试在 onPressButton
函数之外声明您的 JSONModel
。您可以在清单中声明它对整个应用程序(控制器和视图)可见:
"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");
您应该在页面生命周期的集成阶段创建您的模型。 因此,在您的实例中,在相关 view/page:
的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);
希望对您有所帮助。 我相信您知道您使用的未命名模型与命名模型概念之间的区别。
我想你搜索的是命名模型。使用命名模型,如果您想另外添加一个新模型,您可以创建不同的模型而无需覆盖它们。
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>