Question

我在应用程序中使用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>

Detail.view.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>

Component.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);    
}

问题：

我无法在“详细信息”视图中显示所选表行的详细信息。

请对此进行指导。

Answer 1

主要原因是由于您使用bindElement的方式。语句"testModel>/testCollection/"+this._sNum不清楚。尝试以下操作，

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

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

详细信息控制器功能_onRouteMatched中的下一个操作

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

Answer 2

我对主视图/主视图，示例数据和两个控制器进行了一些更改。主要问题在您的主视图和数据中。这是有效的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
  }]
}

无法在sapui5中使用splitcontainer显示详细页面中的数据？

2 个答案: