嗨，所有专家，
我是sapui5中的新手，并且在list.view.js中有以下场景我定义了一个简单的表：
(function () {
"use strict";
sap.ui.jsview("fst.app.cList", {
getControllerName: function () {
return "fst.app.cList";
},
createContent: function (oController) {
//Back button
var oBackButton = new sap.m.Button({
text: "Back",
icon: "sap-icon://arrow-left",
press: oController.handleButtonPress
});
//New contract button
var oNewButton = new sap.m.Button({
text: "New",
icon: "sap-icon://add-document",
press: oController.addNewButtonPress
});
//Spacer
var oSpacer = sap.m.ToolbarSeparator();
//Table body
var oTable = sap.m.Table({
insert: true,
headerText: "List of Items",
headerDesign: sap.m.ListHeaderDesign.Standard,
mode: sap.m.ListMode.None,
includeItemInSelection: false
});
//Columns
var col01 = new sap.m.Column("col01", {
header: new sap.m.Label({
text: "Number"
})
});
oTable.addColumn(col01);
var col02 = new sap.m.Column("col02", {
header: new sap.m.Label({
text: "Product"
})
});
oTable.addColumn(col02);
var col03 = new sap.m.Column("col03", {
header: new sap.m.Label({
text: "Date"
})
});
oTable.addColumn(col03);
var colItems = new sap.m.ColumnListItem("colItems", {
type: "Active"
});
oTable.bindAggregation("items", "/value", colItems);
var txtNAME = new sap.m.Text("txtNAME", {
text: "{ProductID}"
});
colItems.addCell(txtNAME);
var txtNAME2 = new sap.m.Text("txtNAME2", {
text: "{ProductName}"
});
colItems.addCell(txtNAME2);
var txtNAME3 = new sap.m.Text("txtNAME3", {
text: "{UnitsInStock}"
});
colItems.addCell(txtNAME3);
var page = new sap.m.Page({
title: "Test",
enableScrolling: false,
content: [oBackButton, oSpacer, oNewButton, oTable]
});
return page;
}
});
})();
单击Button（oNewButton）时，将调用新视图（new.view.js）。在这个视图中，我想要一个包含第一个视图列的表单。
有没有人能给我一些知识如何以最佳方式实施这样的场景？
提前致谢并致以最诚挚的问候。 丹尼斯
答案 0 :(得分：0)
从一个视图导航到另一个视图的最佳方法是使用路由器。查看此快速教程以了解其工作原理。 https://sapui5.hana.ondemand.com/#docs/guide/1b6dcd39a6a74f528b27ddb22f15af0d.html
要在导航中传递参数，我想你有两个选择。 1.-将它们作为路径模式中的参数传递。这些将出现在哈希路径中。检查这个模式选项： https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.core.sample.PatternMatching/preview
2.-如果必须传递许多字段，请在“组件”范围中创建模型。可以从所有视图访问Component范围。只需使用sap.ui.getCore（）。setModel（）并在目标视图中使用sap.ui.getCore（）。getModel（） 然后将您从Core获得的模型设置为您拥有表单的容器。 这是一个片段：https://jsbin.com/tekisokevu/edit?html,output
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' >
<meta charset="UTF-8" >
<title>test</title>
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/1.38.5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-bindingSyntax="complex"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
<core:ComponentContainer name='my.comp'/>
</mvc:View>
</script>
<script id="home" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
controllerName="my.controller1">
<Page>
<Table id="myTable">
<headerToolbar>
<Toolbar>
<Title text="Modify the column names and press + ==> " />
<ToolbarSpacer/>
<Button icon="sap-icon://add" press="onAddPress"/>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Input palceholder="Column Name" value="Column1"/>
</Column>
<Column>
<Input palceholder="Column Name" value="Column2"/>
</Column>
<Column>
<Input palceholder="Column Name" value="Column3"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="Text1" />
<Text text="Text2" />
<Text text="Text3" />
</cells>
</ColumnListItem>
<ColumnListItem>
<cells>
<Text text="Text1" />
<Text text="Text2" />
<Text text="Text3" />
</cells>
</ColumnListItem>
<ColumnListItem>
<cells>
<Text text="Text1" />
<Text text="Text2" />
<Text text="Text3" />
</cells>
</ColumnListItem>
</items>
</Table>
</Page>
</mvc:View>
</script>
<script id="add" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
controllerName="my.controller2">
<Page id="page" showNavButton="true" navButtonPress="onBack">
<VBox items="{columnsModel>/columns}">
<items>
<HBox class="sapUiLargeMarginBegin">
<Label text="{columnsModel>columnName}:" class="sapUiSmallMarginEnd sapUiSmallMarginTop"/>
<Input placeholder="{columnsModel>columnName} value"/>
</HBox>
</items>
</VBox>
</Page>
</mvc:View>
</script>
<script>
// jQuery.sap.declare("my.comp.Component");
sap.ui.define("my/comp/Component", ["sap/ui/core/UIComponent"], function(UIComponent) {
return UIComponent.extend("my.comp.Component", {
metadata : {
name : "GreatComponent",
version : "1.0",
includes : [],
dependencies : {
libs : ["sap.m"]
},
routing: {
config: {
routerClass: "sap.m.routing.Router",
viewType: "XML",
viewPath: "my",
controlId: "app",
transition: "slide",
controlAggregation: "pages"
},
routes: [
{
name: "home",
pattern: "",
target: "home"
},
{
name: "add",
pattern: "add",
target: "add"
}
],
targets: {
home: {
viewName: "Home",
title: "home"
},
add: {
viewName: "Add",
title: "add"
}
}
}
},
init: function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
var oRouter = this.getRouter();
var oViews = oRouter.getViews();
this.runAsOwner(function() {
var myHome = sap.ui.xmlview({viewContent:jQuery('#home').html()});
oViews.setView("my.Home", myHome);
var myAdd = sap.ui.xmlview({viewContent:jQuery('#add').html()});
oViews.setView("my.Add", myAdd);
});
oRouter.initialize();
},
createContent : function() {
var componentData = this.getComponentData();
return new sap.m.App("app", {
});
}
});
});
sap.ui.define("my/controller1", [
"sap/ui/core/UIComponent"
],function(UIComponent) {
return sap.ui.controller("my.controller1", {
onInit: function() {
this.oRouter = UIComponent.getRouterFor(this.getView());
var oModel = new sap.ui.model.json.JSONModel();
var oData = {
columns: []
}
oModel.setData(oData);
sap.ui.getCore().setModel(oModel, "columnsModel");
},
onAddPress: function() {
var aColumnsNames = [];
var aColumns = this.getView().byId("myTable").getColumns();
for (var i=0; i<aColumns.length; i++){
var sColumnName = aColumns[i].getHeader().getValue();
var oItem = {columnName: sColumnName};
aColumnsNames.push(oItem);
}
sap.ui.getCore().getModel("columnsModel").setProperty("/columns", aColumnsNames);
this.oRouter.navTo("add");
}
});
});
sap.ui.define("my/controller2", [
"sap/ui/core/UIComponent"
],function(UIComponent) {
return sap.ui.controller("my.controller2", {
onInit: function() {
this.oRouter = UIComponent.getRouterFor(this.getView());
var oModel = sap.ui.getCore().getModel("columnsModel");
this.getView().byId("page").setModel(oModel, "columnsModel");
},
onBack: function(){
this.oRouter.navTo("home");
}
});
});
sap.ui.require(["my/comp/Component"], function(myComp) {
// instantiate the View
sap.ui.xmlview({viewContent:jQuery('#view1').html()}).placeAt('content');
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>