bindItems()为每个CustomListItem添加相同的日期

时间:2015-03-30 13:56:17

标签: sapui5 sap-fiori

我们目前正在处理两个列表。一个是附件,另一个是时间轴。

两者都是列表(查看文件):

<IconTabFilter
    icon="sap-icon://attachment"
    key="AttachmentTab"
    text="{i18n>Attachments}">
    <List
        id="AttachmentList"
        includeItemInSelection="true">
    </List>
</IconTabFilter>

<IconTabFilter
    icon="sap-icon://work-history"
    key="TimelineTab"
    text="{i18n>History}">
    <List
        id="Timeline"
        includeItemInSelection="true">
    </List>
</IconTabFilter>

两者都使用类似的oData服务将数据绑定到视图。唯一的区别是CustomListItem。每个CustomListItem显示相同的信息。直接调用webservice时,我们会得到不同的条目。

我们也尝试使用StandardListItem,但都没有工作(控制器文件):

if (evt.getParameter("key") === "AttachmentTab") {
    var template = new sap.m.StandardListItem({
        type: "Active",
        title: "{Objecttext}",
        description: "{Filename}",
        icon: {
            path: "Type",
            formatter: fis.eim.approval.util.Formatter.attachmentIcon
        },
        press: this.handleAttachmentPress
    });

    this.byId("AttachmentList").bindItems(
        "/Invoices(id='" + id + "')/Attachments",
        template
    );
}

if (evt.getParameter("key") === "TimelineTab") {
    var template = new sap.m.CustomListItem({
        content: [
            new sap.m.ObjectIdentifier({
                title: "{Heading}"
            }),
            new sap.m.Text({
                text: "{Text}"
            })
        ]
    });

    this.byId("Timeline").bindItems({
        path: "/Invoices(id='" + id + "')/Timeline",
        template: template
    });

}

虽然它不适用于历史时间表,但附件显示得很好。

我们不知道如何进一步调试该问题。关于bindItems函数可能出现什么问题的任何建议?

编辑:在bindItems()函数调用

之后的oData模型日志
oData:
Approvals('0000000000014886'):
Approvals('0000000000015641'):
Approvals('0000000000016369'):
Approvals('0000000000016370'):
Approvals('0000000000016492'):
Attachments(id='foobar'):
Attachments(id='barfoo'):
Timeline(Belnr='',Gjahr='',Bukrs='',EdcObject=''):
LineItems(Id='0000000000000000',Rblgp='000005'): 
LineItems(Id='0000000000016369',Rblgp='000002'): 
LineItems(Id='0000000000016370',Rblgp='000003'): 
LineItems(Id='0000000000016370',Rblgp='000004'):

有趣的是,所有其他oData调用都有参数,但没有时间轴。打开元素的子树时,我们可以看到所有其他时间轴条目多次重复的标题和文本。

所以问题是,其他时间轴条目在哪里?网络选项卡显示所有条目都已加载,并且只有最后一个json响应位于oData模型中。

亲切的问候,

迈克尔

2 个答案:

答案 0 :(得分:1)

问题可能是(反直觉)Javascript scope for variables;它只有全局范围或功能范围,而不是块范围。

所以最可能的变量template - 尽管在每个if语句中定义 - 基本上只是每个列表的相同对象。

您可以尝试为第二个模板提供不同的变量名称。

编辑:嗯,你可能是对的......我用你的代码测试了它(相同的变量名),它似乎与使用虚拟数据的JSONModel一样好用,见下面的工作示例:

&#13;
&#13;
sap.ui.controller("view1.initial", {
  onInit: function(oEvent) {
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
      Attachments: [{
        "Objecttext": "Coretta",
        "Filename": "Wagner"
      }, {
        "Objecttext": "Leo",
        "Filename": "Smith"
      }, {
        "Objecttext": "Latasha",
        "Filename": "Chavez"
      }, {
        "Objecttext": "Lavern",
        "Filename": "Langfeldt"
      }, {
        "Objecttext": "Dale",
        "Filename": "Santana"
      }, {
        "Objecttext": "Judy",
        "Filename": "Ponthieux"
      }, {
        "Objecttext": "Alonzo",
        "Filename": "Vanderlinden"
      }, {
        "Objecttext": "Lupita",
        "Filename": "Mulvehill"
      }, {
        "Objecttext": "Polina",
        "Filename": "Cowen"
      }, {
        "Objecttext": "Theresia",
        "Filename": "Alvarez"
      }],
      Timeline: [{
        "Heading": "Geoff",
        "Text": "Popsikle"
      }, {
        "Heading": "Esperanza",
        "Text": "Tupper"
      }, {
        "Heading": "Janelle",
        "Text": "Proctor"
      }, {
        "Heading": "Maria",
        "Text": "Kirchner"
      }, {
        "Heading": "Roberto",
        "Text": "Dellinger"
      }, {
        "Heading": "Barkat",
        "Text": "Parham"
      }, {
        "Heading": "Brandon",
        "Text": "Holcombe"
      }, {
        "Heading": "Amela",
        "Text": "Potate"
      }, {
        "Heading": "Eugene",
        "Text": "Tang"
      }, {
        "Heading": "Kehinde",
        "Text": "Clanton"
      }]
    });
    this.getView().setModel(oModel);

  },

  handleIconTabBarSelect: function(evt) {
    if (evt.getParameter("key") === "AttachmentTab") {
      var template = new sap.m.StandardListItem({
        type: "Active",
        title: "{Objecttext}",
        description: "{Filename}",
        icon: "sap-icon://download"
      });

      this.byId("AttachmentList").bindItems(
        "/Attachments",
        template
      );
    }

    if (evt.getParameter("key") === "TimelineTab") {
      var template = new sap.m.CustomListItem({
        content: [
          new sap.m.ObjectIdentifier({
            title: "{Heading}"
          }),
          new sap.m.Text({
            text: "{Text}"
          })
        ]
      });

      this.byId("Timeline").bindItems({
        path: "/Timeline",
        template: template
      });

    }
  }

});

var app = new sap.m.App({});

var oView = sap.ui.xmlview({
  viewContent: jQuery("#view1").html()
});

app.addPage(oView);
app.placeAt("uiArea");
&#13;
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <title>SAPUI5 template</title>

  <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m"></script>

  <script id="view1" type="ui5/xmlview">
    <mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
      <IconTabBar id="idIconTabBar" select="handleIconTabBarSelect">
        <items>
          <IconTabFilter icon="sap-icon://attachment" key="AttachmentTab" text="Attachments">
            <List id="AttachmentList" includeItemInSelection="true">
            </List>
          </IconTabFilter>

          <IconTabFilter icon="sap-icon://work-history" key="TimelineTab" text="History">
            <List id="Timeline" includeItemInSelection="true">
            </List>
          </IconTabFilter>
        </items>
      </IconTabBar>
    </mvc:View>
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="uiArea"></div>
</body>

</html>
&#13;
&#13;
&#13;

也许你的ODataModel没有正确更新?如果在切换标签时加载了正确的数据,您是否可以使用浏览器中的网络选项卡进行检查?

答案 1 :(得分:0)

因为我们无法修复bindItems函数,所以我们使用oDataModel的read函数创建了一个变通方法。

this.getView().getModel().read(
    "/Invoices(id='" + id + "')/Timeline",
    {
        success : (function(data) {
            this.byId("Timeline").destroyItems();

            data.results.forEach((function(text) {
                var template = new sap.m.CustomListItem({
                    content: [
                        new sap.m.ObjectIdentifier({
                            title: text.Heading.trim()
                        }),
                        new sap.m.Text({
                            text: text.Text.trim()
                        })
                    ]
                });
                template.addStyleClass("historyListItem");

                this.byId("Timeline").addItem(template);
            }).bind(this));
        }).bind(this),
        error : (function(error) {
            this._showErrorMessage(error);
        }).bind(this)
    }
);

我们获取结果,并为每个数据条目创建一个CustomListItem,并使用addItem将其添加到列表中。在此之前我们调用destroyItems,否则它会在每次函数调用后再次添加相同的条目。

这不是我们所希望的解决方案,而是在我们找到更好的解决方案之前使其成功的替代方案。