首页 > 解决方案 > SAPUI5 odata 绑定到 vbox 项目的深层结构

问题描述

JSON数据:

{
        "QuestionID": 1,
        "Question": "Question One",
        "Note": "Note: There are 2 correct answers to this question.",
        "Type": "C",
        "Answers": [
            {
                "Id": 1,
                "Text": "Choice 1"
            }, {
                "Id": 2,
                "Text": "Choice 2"
            }, {
                "Id": 3,
                "Text": "Choice 3"
            }, {
                "Id": 4,
                "Text": "Choice 4"
            }
        ]
}

在我看来,我得到了正确数量的答案复选框,但“文本”没有显示。

`<VBox id='checkBoxes' items="{Answers}">
   <items>
      <CheckBox text='{Text}' selected='{selected}' />
   </items>
</VBox>`

任何有关如何绑定答案属性的帮助将不胜感激。

标签: sapui5

解决方案


在您的 VBox 视图代码中,确保您有templateShareable:false. 然后您的嵌套绑定将像魅力一样工作。

这是一个例子:

看法

<CustomListItem>
  <VBox class="sapUiSmallMargin">
    <HBox justifyContent="SpaceBetween" class="sapUiTinyMarginBottom sapUiTinyMarginEnd">
      <Title text="{noteAttach>CreatorName}" />
      <Text text="{parts:[{path:'noteAttach>NotesType'},{path:'noteAttach>CreatedOn'}], formatter:'.formatter.formattedDate'}" />
    </HBox>
    <Text class="sapUiTinyMarginBottom" text="{noteAttach>NotesData}" />
    <VBox items="{path:'noteAttach>Files', templateShareable:false}">
      <HBox>
        <core:Icon class="sapUiTinyMarginEnd" src="{path:'noteAttach>DocType', formatter:'.formatter.customFileIcon'}" />
        <Link href="{parts:[{path:'noteAttach>ObjectId'},{path:'noteAttach>Viewname'},{path:'noteAttach>Title'}], formatter:'.formatter.fileDownloadHref'}" target="_blank" text="{path:'noteAttach>Title'}" />
      </HBox>
    </VBox>
  </VBox>
</CustomListItem>

控制器(对于那些还必须修改从后端收到的 OData 的人,就像我必须做的那样)

this.getOwnerComponent().getModel('noteAttach').read("/NotesandattachmentSet", {
      filters: aFilters,
      success: function(oData) {
        /*  
        the reason why we create a new object property called Files and in it store an unnumbered Title is bc of the need to do binding with deep/nested structures
        if we dont do this, we end up with up to 10 slots of white space for each entry. this is the only way to do this. all other methods mess up search, sort, and filter functionalities
        */
        var aODataResults = oData.results;
        var iODataResultsLength = aODataResults.length;
        for (var j = 0; j < iODataResultsLength; j++) { //sift through each DataEntry in the model
          var aObjectFiles = aODataResults[j].Files = []; //create 'Files' property in each object entry
          for (var i = 1; i < 11; i++) { //in each DataEntry, find ppty Title1,Title2...up to Title10 & remove the ppties thatre empty. if not empty, create a downloadLink & icon for it
            var sObjectFileTitle = aODataResults[j]["Title" + i];
            if (sObjectFileTitle.length !== 0) aObjectFiles.push({
              Title: sObjectFileTitle,
              DocType: aODataResults[j]["DocType" + i],
              ObjectId: aODataResults[j]["ObjectId"],
              Viewname: aODataResults[j]["Viewname"],
            });
          }
        }
        that.getView().setModel(new JSONModel(aODataResults), "noteAttach");
        that.getView().setBusy(false);
      },
      error: function(oError) {
        that.parseErrorMessage(oError);
        that.getView().setBusy(false);
      }

我的模型是什么样子的: 在此处输入图像描述

她的样子:

在此处输入图像描述


推荐阅读