Sapui5 通过XML视图动态呈现卡片

是否有一种方法可以使用XML视图动态呈现

sap.f.Card

控件？也许是聚合绑定？到目前为止，我只对列表和表使用聚合绑定

我需要在主视图上动态渲染一些卡片，但我想继续使用MVC概念。这就是为什么我不喜欢在控制器中渲染卡。我的卡也很复杂，里面有多个控件。（文本、状态指示器、进度指示器等）

---

有没有一种实现方法？

您可以使用with

content

聚合来实现它

view.xml

<core:View
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:fc="sap.f"
    xmlns:card="sap.f.cards"
        controllerName="path.Main"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Main" class="sapUiContentPadding">
        <content>
            <!-- Cards data binding -->
            <l:Grid containerQuery="true" id="cardsGrid" defaultSpan="XL2 L4" class="gridProgressIndicator" hSpacing="0" content="{/cards}">
                <fc:Card class="sapUiMediumMargin" width="300px">
                    <fc:header>
                        <card:Header
                        title="{title}"
                        subtitle="{subTitle}"
                        iconSrc="{icon}"/>
                    </fc:header>
                    <fc:content>
                        <VBox
                        height="115px"
                        class="sapUiSmallMargin"
                        justifyContent="SpaceBetween">
                            <HBox justifyContent="SpaceBetween">
                                <ComboBox
                                width="120px"
                                placeholder="To City"
                                items="{items}">
                                    <core:Item key="{key}" text="{text}" />
                                </ComboBox>
                                <ComboBox
                                width="120px"
                                placeholder="To City"
                                items="{items}">
                                    <core:Item key="{key}" text="{text}" />
                                </ComboBox>
                            </HBox>
                            <HBox justifyContent="SpaceBetween">
                                <DatePicker width="186px" placeholder="Choose Date ..."/>
                                <Button text="Book" press="onBookPress" type="Emphasized" />
                            </HBox>
                        </VBox>
                    </fc:content>
                </fc:Card>
            </l:Grid>
        </content>
    </Page>
</core:View>

输出

• 在Fiori中，卡片通常在内部呈现（事实上，它最初被称为）
• 与表格和列表一样，您也可以使用卡片作为模板控件将
  绑定到

  GridContainer

  ：
  上面的代码段来自具有聚合绑定的

---

谢谢！这已经帮助了我。我正在使用GridContaier进行渲染（来自sap.f.库），那里的聚合绑定也起作用吗？上面写着“遇到了类sap.f.GridContainer的未知设置‘content’”…我正在使用

sap.ui.layout.Grid

layout控件。更新了我的完整视图我试过了，谢谢。我在

sap.ui.layout.Grid

中遇到的问题是内容总是调整大小。或者，如果我更改内容以固定宽度和高度，它们在调整大小时总是重叠。。。我希望内容的高度和宽度是固定的，如果屏幕大小改变，它应该在下面呈现。我还没有找到用于

sap.ui.layout.Grid

的任何选项。使用

sap.f.GridContaier

可以很好地工作，但是聚合绑定不起作用，或者我还没有找到这样做的方法……有什么想法吗？再次感谢这正是我想要的。谢谢我想应该更仔细地阅读文档…@Ardit当你问这个问题时，这个样本可能还不存在；）这是相当新的。

bindCardsGrid: function() {         
  var rowData = [
      { "title": "Title 1", "subTitle": "SubTitle 1", "icon": "sap-icon://menu2", "items": [{ "key": "CV1", "text": "CV1"}, { "key": "CV2", "text": "CV2"}, { "key": "CV3", "text": "CV3"},{ "key": "CV4", "text": "CV4"}]},
      { "title": "Title 2", "subTitle": "SubTitle 2", "icon": "sap-icon://add-contact", "items": [{ "key": "CV1", "text": "CV1"}, { "key": "CV2", "text": "CV2"}, { "key": "CV3", "text": "CV3"},{ "key": "CV4", "text": "CV4"}]},
      { "title": "Title 3", "subTitle": "SubTitle 3", "icon": "sap-icon://business-objects-experience", "items": [{ "key": "CV1", "text": "CV1"}, { "key": "CV2", "text": "CV2"}, { "key": "CV3", "text": "CV3"},{ "key": "CV4", "text": "CV4"}]},
      { "title": "Title 4", "subTitle": "SubTitle 4", "icon": "sap-icon://process", "items": [{ "key": "CV1", "text": "CV1"}, { "key": "CV2", "text": "CV2"}, { "key": "CV3", "text": "CV3"},{ "key": "CV4", "text": "CV4"}]}
  ];       
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData({ "cards": rowData });
  this.getView().setModel(oModel);
},