SAPUI5/OPENUI5:将字符串绑定到 JSON 模型并自动更新更大的字符串(读取 [对象%20Object])

Question

我在SAPUI5中有一个模型，我称之为Foo，它有一个键：值对，{"BarKey"，"BarValue"}。模型已在组件 1 中成功设置，并已成功传播。当组件 1 创建组件 2 时，组件 2 成功显示"BarValue"，当"BarValue"更改时，页面标题也会正确更改：

//Component 1
var oData = {"BarKey", "BarValue"};
var oModel = new sap.ui.model.json.JSONModel(oData);
this.component.setModel(oModel, "Foo");
  //Component 2
  return new sap.m.Page({
  title: {
    path: "Foo>/BarKey"
  },
  });

我的问题如下：我想使用"BarValue"作为URL的一部分来加载新模型和图像源：

//Component 2 (continued)
var oModel2 = new sap.ui.model.json.JSONModel("http://www.mywebsite.com/" + {
    path: "Foo>/BarKey"
  });
var oImage = new sap.ui.Image({src: "http://www.mywebsite.com/" + {
    path: "Foo>/BarKey"
  }});

这种类型的绑定不起作用。我希望在 oModel1 更改时更改模型和图像的来源。我的浏览器控制台记录以下错误：

"http://www.mywebsite.com/"[object Object]"在 Element sap.ui.commons.Image#中不存在__image0

获取"http://www.mywebsite.com/[对象%20对象]" 404 (未找到(

如何让 [object%20Object] 作为字符串读取，并在 oModel 中更改部分字符串时更新整个字符串？

Answer 1

试试

var oImage = new sap.ui.Image({
    src: "http://www.mywebsite.com/{Foo>/BarKey}"
});

并将data-sap-ui-xx-bindingSyntax="complex"添加到加载 UI5 的 <script> 标记中

https://openui5.netweaver.ondemand.com/#docs/guide/0c803921b1bf4b3a97a038fbd51ef542.html

---

如果这不起作用，您必须尝试格式化程序

var oImage = new sap.ui.Image({
    src: {
        parts: [{
            path: 'Foo>/BarKey'
        }],
        formatter: function(parameter) {
            return "http://www.mywebsite.com/" + parameter;
        }
    }
});

https://openui5.netweaver.ondemand.com/#docs/guide/07e4b920f5734fd78fdaa236f26236d8.html

---

若要在路径更改后立即更新模型，可以使用 sap.ui.model.Binding

var fooModel = this.getModel("Foo");
var url = "http://www.mywebsite.com/" + fooModel.getParameter("/BarKey"));
var oModel2 = new sap.ui.model.json.JSONModel(url);
var binding = new sap.ui.model.Binding(fooModel, "/BarKey", fooModel.getContext("/"));
binding.attachChange(function(){
    oModel2.loadData("http://www.mywebsite.com/" + fooModel.getProperty("/BarKey")));
});