sapui5 - SAP UI5：绑定错误

Question

尽管在 SAP HCM 开发方面经验丰富，但我刚刚开始学习 UI5（使用 eclipse），所以如果我的问题有点基本，我提前道歉......

我正在尝试创建数据绑定（基于 UI5 摇滚明星 DJ Adams 的示例），但由于某种原因，没有结果。

在我的控制器中，我输入了以下代码（在 onInit 函数中）来创建数据并使其可用：

onInit: function() {
var cities = [ { id: "A1", name: "Kobe" },
           { id: "A2", name: "Hiroshoma" }
];
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(cities);

        sap.ui.getCore().setModel(oModel);



},

在我看来，我尝试使用以下代码绑定数据：

                        </IconTabFilter>
                        <IconTabFilter
                            binding="{/cities/0}"
                            text="{name}"
                            icon="sap-icon://group"
                            design="Horizontal">

                        </IconTabFilter>
                        <IconTabFilter
                            binding="{/cities/1}"
                            text="{name} ({id})"
                            icon="sap-icon://group"
                            design="Horizontal">

                        </IconTabFilter>

                    </items>
                </IconTabBar>
</content>
</Page>
</core:View>

在我的输出中，所有元素都正确显示，但是我没有得到我在模型中初始化的值。但是我也没有收到任何错误

我的问题： 1. 你能提供一些帮助/指导来看看我在哪里犯了错误吗？2. 在数据绑定（调试器、其他提示）方面，检测问题出在哪里的最简单方法是什么？

非常感谢您的指导，

汤姆

score 2 · Accepted Answer

错误确实在您的绑定中。尽管您有一个变量cities，但您的 JSON 上下文以id. 您可以更新您的 JSONModel 以具有根元素cities：

.setModel({
  cities: [
    { id: "A1", name: "Kobe" },
    { id: "A2", name: "Hiroshoma" }
  ]
});

至于调试，我更喜欢标准的 Google Chrome 浏览器工具。它允许监视、断点和（小的）实时代码更改。

score 0 · Accepted Answer

请尝试使用模板，而不是绑定单个元素，您可以使用模板将数组绑定到单个元素。例子：

<List
items="{/ProductCollection}"
headerText="Products">
<items>
  <ObjectListItem
    title="{Name}"
    type="Active"
    press="onListItemPress"
    number="{Price}"
    numberUnit="{CurrencyCode}">
    <firstStatus>
      <ObjectStatus
        text="Overweight"
        state="Error" />
    </firstStatus>
    <secondStatus>
      <ObjectStatus
        text="In Stock"
        state="Success" />
    </secondStatus>
    <attributes>
      <ObjectAttribute text="{WeightMeasure} {WeightUnit}" />
      <ObjectAttribute text="{Width} x {Depth} x {Height} {DimUnit}" />
    </attributes>
  </ObjectListItem>
</items>

【现场示例：https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.ObjectListItem/code】

如果您想更好地控制数据，则可以使用键值对设置多个模型。

例子：

sap.ui.getCore().setModel("key",oModel);

并获得价值：

sap.ui.getCore().getModel("key");

score 0 · Accepted Answer

您创建模型的方法并不安静。可变城市不是对象而是数组。您可以将数据设置为模型：

onInit: function() {
var cities ={ "cities": [{ "id": "A1", "name": "Kobe" },
                     { "id": "A2", "name": "Hiroshoma" }
                     ]}
    var oModel = new sap.ui.model.json.JSONModel();

    oModel.setData(cities);

    sap.ui.getCore().setModel(oModel);

},

或者您可以设置属性：

var cities = [ { id: "A1", name: "Kobe" },
       { id: "A2", name: "Hiroshoma" }
];
    var oModel = new sap.ui.model.json.JSONModel();

    oModel.setProperty("/cities", cities);

    sap.ui.getCore().setModel(oModel);

而且您还必须正确绑定您的xml。您可以按照 SapUi5 探索或开发人员指南中的列表项模板进行操作

sapui5 - SAP UI5：绑定错误

3 回答 3

Related

Reference