JSON数据未在SAPUI5应用程序中从第一个视图导航的视图中绑定

Question

我的SAPUI5应用程序在XML视图中具有包含两个页面（主页和详细信息）的拆分容器的第一个视图。主页面具有与JSON文件绑定的列表，并且单击列表中的任何数据，它将在详细信息侧填充（两者都在相同的视图中）在第一个视图和＃34; SplitApp.view.xml＆＃34;之间有导航的另外两个完整页面视图。和＆＃34; Secondpage.view.xml＆＃34;但是在Secondpage视图中数据没有绑定。我从外部JSON模型中获取数据。

在我的第一个视图中，SplitApp.view.xml＆＃34;，导航到第二个视图的按钮是

    <Button icon="sap-icon://cart" press="navToShoppingCart" text="Cart"/>

在我的控制器中：

    navToShoppingCart: function(oEvent) {
        var router = sap.ui.core.UIComponent.getRouterFor(this);
        router.navTo("Secondpage");
        this.showDetails2(oEvent.getSource().getBindingContext().getPath('CustomerMaster/0'.substring(15)));
    },

    showDetails2: function(secondPath) {
        var omodel = new sap.ui.model.json.JSONModel();
        omodel.loadData("model/model.json");
        this.getView().setModel(omodel);
        this.getView("Secondpage").byId('shopTable').bindElement({
            path: secondPath
        });
    },

由于我是SAPUI5的新手，您能否帮我理解此代码中的错误以及如何进一步处理？我需要在＆＃34; Secondpage.contoller.js＆＃34;我需要在manifest.json和任何其他文件中指定任何内容吗？ 我正在使用网络。

Answer 1

主控制器：

navToShoppingCart: function(oEvent) {
    var router = sap.ui.core.UIComponent.getRouterFor(this);
    router.navTo("Secondpage", {
      path: oEvent.getSource().getBindingContext().getPath('CustomerMaster/0'.substring(15))
    });
  },

详情控制器：

onInit: function() {
    var omodel = new sap.ui.model.json.JSONModel();
    omodel.loadData("model/model.json");
    this.getView().setModel(omodel);
    var router = sap.ui.core.UIComponent.getRouterFor(this);
    router.getRoute("Secondpage").attchMatched(this._onRouteMatched, this);
  }, _onRouteMatched: function(oEvent) {
    var path = oEvent.getParameter('arguments').path;
    this.getView().byId("shopTable").bindItems({
      path: path
    });
  },

注意：确保component.js文件中有效模式..

Answer 2

我必须将数据绑定到第二个视图“Secondpage.view.xml”

的表中

第一个观点：

<mvc:View controllerName="shopping.controller.SplitApp" displayBlock="true"
xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc"
xmlns:t="sap.m.table" xmlns="sap.m">
<Bar>
    <contentLeft>
        <Button icon="sap-icon://menu2"/>
        <Button icon="http://www.sap.com/global/images/SAPLogo.gif"/>
    </contentLeft>
    <contentRight>
        <Button icon="sap-icon://search"/>
        <Button icon="sap-icon://account" text="Priyanka Singh"/>
    </contentRight>
</Bar>
<SplitContainer id="SplitContDemo" initialDetail="detail" initialMaster="master">

    <masterPages>

        <Page class="sapUiStdPage" icon="sap-icon://action" id="master" navButtonPress="onPressMasterBack" showNavButton="true" title="Smart Solutions Products">
            <subHeader>
        <Bar id="headerBar">
            <contentMiddle>
                <SearchField id="searchField" liveChange="onSearch" showRefreshButton="{= !${device>/support/touch} }" tooltip="{i18n>masterSearchTooltip}"
                    width="100%"></SearchField>
            </contentMiddle>
        </Bar>
    </subHeader>

        <List id="list1" items="{path:'/CustomerMaster'}">
            <items>
                <ObjectListItem type="Active" press="onListItemPress" number="{price}" title="{name}"/>
            </items>
        </List>
        </Page>
    </masterPages>

    <detailPages>
        <Page class="sapUiStdPage" id="detail" title="Product">

                <Button icon="sap-icon://cart" press="navToShoppingCart" text="Cart"/>

        <content>
        <ObjectHeader id="objectHeader" number="{ path: 'price' }" title="{name}"></ObjectHeader>
        <IconTabBar class="sapUiResponsiveContentPadding" id="iconTabBar">
            <items>
                <IconTabFilter id="iconTabBarFilter1" text="Information">
                    <content>
                        <f:SimpleForm id="form1" columnsL="1" columnsM="1" editable="false" emptySpanL="4" emptySpanM="4" labelSpanL="3" labelSpanM="3"
                            layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024">
                            <f:content>
                                <Label text="Material Group"/>
                                <Text text="{group}"/>
                                <Label text="Delivering Plant"/>
                                <Text text="{plant}"/>
                                <Label text="Division"/>
                                <Text text="{division}"/>
                                <Label text="Product Heirarchy"/>
                                <Text text="{heirarchy}"/>
                            </f:content>
                        </f:SimpleForm>
                    </content>
                </IconTabFilter>
            </items>
        </IconTabBar>
        </content>
        </Page>
    </detailPages>
</SplitContainer>

第二控制器：

sap.ui.define([
"sap/ui/core/mvc/Controller"

]，function（Controller）{     “使用严格”;

return Controller.extend("shopping.controller.Secondpage", {
    onInit: function() {
        var omodel = new sap.ui.model.json.JSONModel();
        omodel.loadData("model/model.json");
        this.getView().setModel(omodel);
        var router = sap.ui.core.UIComponent.getRouterFor(this);
        router.getRoute("Secondpage").attachMatched(this._onRouteMatched, this);
    },
    _onRouteMatched: function(oEvent) {
        var path = oEvent.getParameter('arguments').path;
        this.getView().byId("shopTable").bindItems({
            path: path
        });
    },

    onNavBack: function() {
        var router = sap.ui.core.UIComponent.getRouterFor(this);
        router.navTo("SplitApp");
    }

});

}）;

第一个控制器：

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/Filter"

]，function（Controller，Filter）{     “使用严格”;

return Controller.extend("shopping.controller.SplitApp", {

    onInit: function() {
        var omodel = new sap.ui.model.json.JSONModel();
        omodel.loadData("model/model.json");
        this.getView().byId("list1").setModel(omodel);
    },

    onListItemPress: function(oEvent) {
        this.showDetails1(oEvent.getSource().getBindingContext().getPath());
    },

    showDetails1: function(detailPath) {
        var omodel = new sap.ui.model.json.JSONModel();
        omodel.loadData("model/model.json");
        this.getView().setModel(omodel);
        this.getView().bindElement({
            path: detailPath
        });

    },

    navToShoppingCart: function(oEvent) {
    var router = sap.ui.core.UIComponent.getRouterFor(this);
    router.navTo("Secondpage", {
      path: oEvent.getSource().getBindingContext().getPath('CustomerMaster/0'.substring(15))
    });
  },

    onSearch: function(oEvent) {
        var aFilters = [];
        var sQuery = oEvent.getSource().getValue();
        if ((sQuery && sQuery.length) > 0) {

            var filter = new Filter("name", sap.ui.model.FilterOperator.Contains, sQuery);

            aFilters.push(filter);
        }
        var table1 = this.getView().byId("list1");
        var binding = table1.getBinding("items");
        binding.filter(aFilters);
    }

});

}）;

第二种观点

<mvc:View controllerName="shopping.controller.Secondpage" xmlns:f="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns="sap.m" xmlns:table="sap.m.table">
<Bar>
    <contentLeft>
        <Button icon="sap-icon://menu2"/>
        <Button icon="http://www.sap.com/global/images/SAPLogo.gif"/>
    </contentLeft>
    <contentRight>
        <Button icon="sap-icon://search"/>
        <Button icon="sap-icon://account" text="Priyanka Singh"/>
    </contentRight>
</Bar>
<Page navButtonPress="onNavBack" showNavButton="true" title="Cart">
    <content>
        <f:SimpleForm columnsL="1" columnsM="1" editable="false" emptySpanL="4" emptySpanM="4" labelSpanL="3" labelSpanM="3"
            layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024">
            <f:content>
                <Label text="Price"/>
                <Text text="10000"/>
                <Label text="Surcharge"/>
                <Text text="5000"/>
                <Label text="Rebate 0"/>
                <Text text="15000"/>
                <Label text="Delivery Conformation"/>
                <Text text="20/12/2016"/>
            </f:content>
        </f:SimpleForm>
        <Table id="shopTable" items="{path:'CustomerMaster'}">
            <headerToolbar>
                <Toolbar>
                    <Title text="Items(1)"/>
                    <ToolbarSpacer></ToolbarSpacer>
                </Toolbar>
            </headerToolbar>
            <columns>
                <Column>
                    <Text text=" "/>
                </Column>
                <Column>
                    <Text text="Description"/>
                </Column>
                <Column>
                    <Text text="Product Number"/>
                </Column>
                <Column>
                    <Text text="Requested Quantity"/>
                </Column>
                <Column>
                    <Text text="Requested Date"/>
                </Column>
            </columns>
            <items>
                <ColumnListItem >
                    <cells>
                        <Text text=""/>
                        <Text text="{name}"/>
                        <Text text="{ProdNo}"/>
                        <Text text="{quantity}"/>
                        <Text text="{reqDate}"/>
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
        <ToolbarSpacer></ToolbarSpacer>
        <Button press="navToFinalPage" text="Order Details"/>
    </content>
</Page>

JSON文件“model.json”位于模型文件夹中： -

{
"CustomerMaster":
[
     {
        "name":"DUOTECH",
        "price":"10000",
        "group":"Pumps",
        "plant":"Lyon",
        "division":"Cross",
        "heirarchy":"Pumps Machine",

        "ProdNo":"01",
        "quantity":"1",
        "date":"16/02/2016",
        "reqDate":"16/12/2016",
        "confDate":"20/12/2016",

        "order":"01",
        "party":"Smart Solutions",
        "address":"Calvinstr 41",
        "city":"Berlin",
        "state":"Berlin",
        "zip":"12345",
        "country":"Germany",
        "phone":"0987656",
        "carrier":" ",
        "incoterms":"Cif Berlin",
        "instruction":"Urgent for Michael Rich",
        "note":" "
    },

    {
        "name":"TECH SOLN",
        "price":"20000",
        "group":"Heavy Pumps",
        "plant":"Lyon",
        "division":"Cross",
        "heirarchy":"Pumps Machine",

        "ProdNo":"02",
        "quantity":"2",
        "date":"17/02/2016",
        "confDate":"22/12/2016",

        "order":"02",
        "party":"Techno Solutions",
        "address":"Calvinstr 41",
        "city":"Sydney",
        "state":"Sydney",
        "zip":"12345",
        "country":"Autralia",
        "phone":"0987656",
        "carrier":" ",
        "incoterms":"Cif Berlin",
        "instruction":"Urgent for David Rickman",
        "note":" "
    },

    {
        "name":"CYBER TECH",
        "price":"30000",
        "group":"Monitors",
        "plant":"Lyon",
        "division":"Cross",
        "heirarchy":"Monitors Machine",

        "ProdNo":"03",
        "quantity":"3",
        "date":"18/02/2016",
        "confDate":"25/12/2016",

        "order":"03",
        "party":"Cyber Solutions",
        "address":"Calvinstr 41",
        "city":"New York",
        "state":"New York",
        "zip":"12345",
        "country":"USA",
        "phone":"0987656",
        "carrier":" ",
        "incoterms":"Cif Berlin",
        "instruction":"Urgent for Rachel Green",
        "note":" "
    }

    ]

}