使用绑定到JSON模型阵列的表创建SAP UI5 XML视图

时间:2015-03-11 18:20:07

标签: xml json data-binding sapui5

在一个视图控制器中,我捕获一个事件并使用它来生成Ajax调用以检索其他数据。然后将此数据存储为父控制器中的JSONModel(id为“app”)。这一切都按预期工作,并产生以下JSON模型:

var jsonText = ...
sap.ui.getCore().byId("app").setModel(new sap.ui.model.json.JSONModel(jsonText), "theProject");

使用console.log,该模型中的示例数据为:

{
    "Id":"29",
    "AccountId":"28",
    "Account":"Test Account",
    "Name":"Test Project",
    "ExpensePercentage":"0",
    "FixedBid":"95400.00",
    "Complete":"false",
    "Calculated":"95400.00",
    "Billed":"7917.50",
    "Invoices":[
        {
            "Id":"17",
            "Number":"LE02042015",
            "Date":"02/04/2015",
            "Services":"7762.50",
            "Expenses":"1220.33"
        },
        {
            "Id":"18",
            "Number":"LE02042015A",
            "Date":"02/04/2015",
            "Services":"155.00",
            "Expenses":"824.70"
        }
    ]
}

这一切都符合要求。然后,我导航到辅助视图以显示此信息。主要的数据元素显示在ObjectHeader中,然后我有一个IconTabBar,带有一个IconTabFilter,里面有一个表来显示Invoices数组。这是与数组,并将它绑定到表,我有一个问题。下面是用于显示此数据的XML视图:

<core:View 
xmlns:core="sap.ui.core" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns="sap.m"
xmlns:form="sap.ui.layout.form"
controllerName="linxas.com.fiori.application.view.Project" 
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Project Summary"
      showNavButton="true"
      navButtonPress="handleNavButtonPress">
    <ObjectHeader
        title="{theProject>/Name}"
        number="{theProject>/Calculated}"
        numberUnit="USD" >
        <attributes>
            <ObjectAttribute text="Account: {theProject>/Account}" />
            <ObjectAttribute text="Fixed Bid: {theProject>/FixedBid}" />
        </attributes>
        <firstStatus>
            <ObjectStatus id="projectStatus"
                text="{
                    path: 'theProject>/Complete',
                    formatter: 'linxas.com.fiori.application.util.Formatter.statusText'
                }"
                state="{
                    path: 'theProject>/Complete',
                    formatter: 'linxas.com.fiori.application.util.Formatter.statusState'
                }" 
            />
        </firstStatus>
    </ObjectHeader>
    <IconTabBar expanded="true" select="handleTabSelection">
        <items>
            <IconTabFilter icon="sap-icon://sales-order">
                <Table
                    headerText="Invoices"
                    items="{theProject>/Invoices}">
                    <columns>
                        <Column>
                            <header>
                                <Label text="Invoice No." />
                            </header>
                        </Column>
                        <Column>
                            <header>
                                <Label text="Date" />
                            </header>
                        </Column>
                        <Column>
                            <header>
                                <Label text="Services" />
                            </header>
                        </Column>
                        <Column>
                            <header>
                                <Label text="Expenses" />
                            </header>
                        </Column>
                    </columns>
                    <ColumnListItem type="Inactive">
                        <cells>
                            <ObjectIdentifier title="{Number}" />
                            <Text
                                text="{
                                    path:'Date'
                                }" 
                            />
                            <Text
                                text="{
                                    path:'Services'
                                }" 
                            />
                            <Text
                                text="{
                                    path:'Expenses'
                                }" 
                            />
                        </cells>
                    </ColumnListItem>
                </Table>
            </IconTabFilter>
        </items>
    </IconTabBar>
    <footer>
        <Bar>
        </Bar>
    </footer>
</Page>

我得到的是一个成功的标题部分,其中显示了所有正确的数据,以及选项卡和表格。该表中包含正确的行数,但所有单元格都是空的,就好像我对聚合的绑定是正确的,但是对各个属性的绑定不正确。这看起来应该很简单,但我很难用这个。

更新:

herrlock的评论解决了我的问题。我还需要在单元格控件中引用模型名称。我认为,由于模型引用是在表本身中进行的,因此不需要在表项中再次进行。这是一个不正确的假设。

所以固定视图如下:

<core:View 
xmlns:core="sap.ui.core" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns="sap.m"
xmlns:form="sap.ui.layout.form"
controllerName="linxas.com.fiori.application.view.Project" 
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Project Summary"
      showNavButton="true"
      navButtonPress="handleNavButtonPress">
    <ObjectHeader
        title="{theProject>/Name}"
        number="{theProject>/Calculated}"
        numberUnit="USD" >
        <attributes>
            <ObjectAttribute text="Account: {theProject>/Account}" />
            <ObjectAttribute text="Fixed Bid: {theProject>/FixedBid}" />
        </attributes>
        <firstStatus>
            <ObjectStatus id="projectStatus"
                text="{
                    path: 'theProject>/Complete',
                    formatter: 'linxas.com.fiori.application.util.Formatter.statusText'
                }"
                state="{
                    path: 'theProject>/Complete',
                    formatter: 'linxas.com.fiori.application.util.Formatter.statusState'
                }" 
            />
        </firstStatus>
    </ObjectHeader>
    <IconTabBar expanded="true" select="handleTabSelection">
        <items>
            <IconTabFilter icon="sap-icon://sales-order">
                <Table
                    headerText="Invoices"
                    items="{theProject>/Invoices}">
                    <columns>
                        <Column>
                            <header>
                                <Label text="Invoice No." />
                            </header>
                        </Column>
                        <Column>
                            <header>
                                <Label text="Date" />
                            </header>
                        </Column>
                        <Column>
                            <header>
                                <Label text="Services" />
                            </header>
                        </Column>
                        <Column>
                            <header>
                                <Label text="Expenses" />
                            </header>
                        </Column>
                    </columns>
                    <ColumnListItem type="Inactive">
                        <cells>
                            <ObjectIdentifier title="{theProject>Number}" />
                            <Text
                                text="{
                                    path:'theProject>Date'
                                }" 
                            />
                            <Text
                                text="{
                                    path:'theProject>Services'
                                }" 
                            />
                            <Text
                                text="{
                                    path:'theProject>Expenses'
                                }" 
                            />
                        </cells>
                    </ColumnListItem>
                </Table>
            </IconTabFilter>
        </items>
    </IconTabBar>
    <footer>
        <Bar>
        </Bar>
    </footer>
</Page>

谢谢!

0 个答案:

没有答案