0

我在我的应用程序中使用 splitcontainer。我使用了两种视图，一种用于母版页，另一种用于详细信息页。

这是我的视图代码：Main.view.xml（包含主视图和详细视图）

    <SplitContainer id="idSplitContainer">
            <masterPages>
            <mvc:XMLView id="master" viewName="com.test.view.Master"/>
            </masterPages>
            <detailPages>
            <mvc:XMLView id="detail" viewName="com.test.view.Detail"/>
            </detailPages>
        </SplitContainer>

Master.view.xml：

<ScrollContainer height="35rem" width="100%" horizontal="false" vertical="true" focusable="false">

<Table  id="listTable" inset="false" items="{ path: 'testModel>/testCollection'}" fixedLayout="false">
<columns>
    <Column>
    <Text text=" Number"/></Column>
    <Column>
    <Text text="Description"/>  </Column>
    <Column>
    <Text text="Status"/>
    </Column>
    </columns>
    <items>
    <ColumnListItem  vAlign="Middle" type="Navigation" press="onSelectionChange">                   
    <cells>
    <Text text="{testModel>Number}" wrapping="false"/>
    <Text text="{testModel>Description}" wrapping="false"/>
    <Text text="{testModel>Status}" wrapping="false"/>
    </cells>
    </ColumnListItem>
    </items>
    </Table>

  </ScrollContainer>

详细视图.xml

<mvc:View controllerName=com.test.controller.Detail" xmlns="sap.m" xmlns:form="sap.ui.layout.form"  xmlns:core="sap.ui.core" xmlns:commons="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc">
<form:Form >
<form:layout>
<form:ResponsiveGridLayout columnsM="1" columnsL="1" labelSpanL="2" labelSpanM="2" emptySpanL="2" emptySpanM="2" />
</form:layout>
<form:formContainers>
<form:FormContainer>
    <form:formElements>
    <form:FormElement>
        <form:fields>
        <Label id="DescriptionLabel" text="Description" />
            <Input value="{testModel>Description}"></Input>
        </form:fields>
    </form:FormElement>
        </form:formElements>
        </form:FormContainer>   
    </form:formContainers>
    </form:Form>

</mvc:View>

组件.js

    routing: {
    config: {
        routerClass: "sap.m.routing.Router",
        viewPath: "com.test.view",
        controlId: "SplitContainer",
        viewType: "XML",
        async: true
        },
        routes: [{
            name: "master",
            pattern: "",
            target: ["master"]
            }, {
            name: "testDetails",
            pattern: "test/:Number:",
            target: ["testDetails"]
            }],
        targets: {
            master: {
            viewName: "Master",
            controlAggregation: "masterPages",
            viewLevel: 0
            },
        testDetails: {
            viewName: "Detail",
            controlAggregation: "detailPages",
            viewLevel: 1
            }
        }
    },
var sampleData = {
        "testCollection": [{
         "Description": "Test Description1",
         "Status": "Completed",
        "Number":10021
        }, {
        "Description": "Test Description2",
        "Status": "Completed",
        "Number":10025
}
]
};
var oModel = new sap.ui.model.json.JSONModel(sampleData);
this.setModel(oModel,"testModel");

我在组件级别设置模型，并且在主视图和详细视图中都使用。

Master.controller.js

onSelectionChange: function (oEvent) {
   var sNum = oEvent.getSource().getBindingContext("testModel").getObject().Number;
this.getOwnerComponent().getRouter().navTo("testDetails", {
                        Number: sNum
                    }, false);
            }

Detail.controller.js：

onInit: function() {  
this.getOwnerComponent().getRouter().getRoute("testDetails").attachPatternMatched(this._onRouteMatched, this); 
   },
_onRouteMatched: function(oEvent) {
this._sNum = oEvent.getParameter("arguments").Number;
this.getView().bindElement("testModel>/testCollection/"+this._sNum);    
}

问题：

我无法在详细信息视图中显示选定表格行的详细信息。

请指导我。 在此处输入图像描述

4

2 回答 2

0

我对主视图/主视图、示例数据和两个控制器进行了一些更改。主要问题在于您的主视图和数据。这是一个有效的Plnkr或见下文：

在Manifest.json或您的Component.js中

"routing": {
  "config": {
    "routerClass": "sap.m.routing.Router",
    "viewPath": "com.test.view",
    "controlId": "rootControl",
    "viewType": "XML",
    "async": true,
    "bypassed": {
      "target": ["master"]
    }
  },
  "routes": [{
    "name": "master",
    "pattern": "",
    "target": ["master"]
  }, {
    "name": "detail",
    "pattern": "testCollection/:detailID:", <<Change
    "target": ["master", "detail"]
  }],
  "targets": {
    "master": {
      "viewName": "Master",
      "controlAggregation": "masterPages",
      "viewLevel": "0"
    },
    "detail": {
      "viewName": "Detail",
      "controlAggregation": "detailPages",
      "viewLevel": "1"
    }
  }
}

在master.view.xml中，我建议您不要使用表作为主控，而是使用列表：

<mvc:View controllerName="com.test.controller.Detail" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:semantic="sap.m.semantic">
  <semantic:MasterPage id="page" title="Contents">
    <semantic:content>
      <ScrollContainer height="35rem" width="100%" horizontal="false" vertical="true" focusable="false">
        <List id="list" items="{testModel>/testCollection}" mode="SingleSelectMaster" noDataText="No List Found" growing="true" growingScrollToLoad="true" selectionChange="onSelectionChange" updateFinished="onUpdateFinished">
          <items>
            <StandardListItem title="{testModel>Description}" type="Active" press="onSelectionChange" description="{testModel>Number}" />
          </items>
        </List> <!--List instead of a table -->
        </ScrollContainer>
    </semantic:content>
  </semantic:MasterPage>
</mvc:View>

在您的Master.controller.js中，更改很少，主要是通过添加.getSelectedItem()方法（不适用于移动设备）：

onInit: function() {
    this.getOwnerComponent().getRouter().getRoute("master").attachPatternMatched(this._onRouteMatched, this);
  },
  _onRouteMatched: function(oEvent) { //<<Inital
    if (!Device.system.phone) {
      this.getOwnerComponent().getRouter()
        .navTo("detail", {
          detailID: 0 
        }, true);
    }
  },
  onSelectionChange: function(oEvent) {
    var sNum = oEvent.getSource().getSelectedItem().getBindingContext("testModel").getProperty("id"); //<<selectedItem using id

    this.getOwnerComponent().getRouter().navTo("detail", {
      detailID: sNum 
    }, false);
  }

在Detail.view.xml中，可以保持不变或添加语义标签：

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout" xmlns:form="sap.ui.layout.form" controllerName="com.test.controller.Detail" xmlns:semantic="sap.m.semantic">
  <semantic:DetailPage id="page" title="{i18n>detailTitle}" navButtonPress="onNavBack">
    <semantic:content>
      <form:Form>
        <form:layout>
          <form:ResponsiveGridLayout columnsM="1" columnsL="1" labelSpanL="2" labelSpanM="2" emptySpanL="2" emptySpanM="2" />
        </form:layout>
        <form:formContainers>
          <form:FormContainer>
            <form:formElements>
              <form:FormElement>
                <form:fields>
                  <Label id="DescriptionLabel" text="Description" />
                  <Input value="{testModel>Description}"></Input>
                </form:fields>
              </form:FormElement>
            </form:formElements>
          </form:FormContainer>
        </form:formContainers>
      </form:Form>
    </semantic:content>
  </semantic:DetailPage>
</mvc:View> <!--same but with semanticpage attribute -->

在你的Detail.controller.js 

onInit: function() {
    this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onRouteMatched, this);
  },
  _onRouteMatched: function(oEvent) {
    this._sNum = oEvent.getParameter("arguments").detailID;
    this.getView().bindElement({
      path: "/testCollection/" + this._sNum,
      model: "testModel"
    });
  }

对data.json或您的Component.js的 ID 跟踪做了一个小小的补充：

{
  "testCollection": [{
    "id": 0, //<<tracked by id 
    "Description": "Test Description1",
    "Status": "Completed",
    "Number": 10021
  }, {
    "id": 1,
    "Description": "Test Description2",
    "Status": "Completed",
    "Number": 10025
  }]
}

于 2018-11-12T12:16:28.183 回答
0

原因主要是由于您使用bindElement. 声明"testModel>/testCollection/"+this._sNum不明确。试试下面的，

在主控制器的功能onSelectionChange中执行此操作，

onSelectionChange: function (oEvent) { var sContextPath = oEvent.getSource().getBindingContext("testModel").getPath(); this.getOwnerComponent().getRouter().navTo("testDetails", { Path: sContextPath }, false); }

接下来在 Detail 控制器的函数_onRouteMatched中执行此操作，

_onRouteMatched: function(oEvent) { this.getView().bindElement({path: oEvent.getParameter("arguments").Path , model: "testModel"}); }

于 2018-11-01T19:45:58.440 回答