主详细视图[绑定不工作]SAPUI5
预期产出主详细视图[绑定不工作]SAPUI5,sapui5,Sapui5,预期产出 单击“表格详细信息”页面的某一行时,应显示该行的详细信息 问题 sap.ui.controller("odatacruddemo.Master", { /** * Called when a controller is instantiated and its View controls (if available) are already created. * Can be used to modify the View before it is displayed, to bin
单击“表格详细信息”页面的某一行时,应显示该行的详细信息 问题
sap.ui.controller("odatacruddemo.Master", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf odatacruddemo.Master
*/
onInit: function() {
var serviceURL = 'http://services.odata.org/V4/OData/OData.svc/Persons?$expand=PersonDetail';
var oModel = new sap.ui.model.json.JSONModel(serviceURL);
oModel.attachRequestCompleted(function(oEvent){
//bind a model to a view
var masterView = sap.ui.getCore().byId("masterPage");
masterView.setModel(oModel);
//sap.ui.getCore().setModel(oModel);
});
//sap.ui.getCore().setModel(oModel);
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf odatacruddemo.Master
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf odatacruddemo.Master
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf odatacruddemo.Master
*/
// onExit: function() {
//
// }
onListPress: function(oEvent){
console.log('List Item pressed');
//Get the Selected Items
//get the row data which has been clicked
var clickedItem = sap.ui.getCore().byId('oProductTable').getSelectedItems();
var cells = clickedItem[0].getCells();
var contexts = sap.ui.getCore().byId("oProductTable").getSelectedContexts();
console.log('Master ctx:');
console.log(contexts);
var items = contexts.map(function(c) {
return c.getObject();
});
console.log(items[0]);
var detailsPage = app.getPage('detailsPage');
detailsPage.setBindingContext(contexts,"data");
app.to(detailsPage);
//var detailsView = sap.ui.getCore().byId("detailsPage");
//detailsView.getModel().setData(items[0]);
//var oContext = oEvent.getSource().getBindingContext();
//console.log(oEvent);
}
});
sap.ui.jsview("odatacruddemo.Details", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf odatacruddemo.Details
*/
getControllerName : function() {
return "odatacruddemo.Details";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf odatacruddemo.Details
*/
createContent : function(oController) {
var oObjectHeader = new sap.m.ObjectHeader({
title: "{Name}",
attributes:[
new sap.m.ObjectAttribute({
text: "{Name}"
})
]
});
var detailsPage = new sap.m.Page({
title: "DetailsPage",
content: [
oObjectHeader
]
});
return detailsPage;
}
});
- 数据绑定不工作。
- 在“详细信息”视图中,控件未显示绑定到它的数据李>
- 在details视图控制器中,如果我在控制台中打印上下文(通过表上的getSelectedContext()获得),它将显示数据,但在视图中,控件不显示数据 约束它
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
//set local resources
sap.ui.localResources("odatacruddemo");
//create app and set the initialPage to be displayed
var app = new sap.m.App({
initialPage: 'masterPage'
});
var masterPage = new sap.ui.view({
id: 'masterPage',
viewName: 'odatacruddemo.Master',
type: sap.ui.core.mvc.ViewType.JS
});
var detailsPage = new sap.ui.view({
id: 'detailsPage',
viewName: 'odatacruddemo.Details',
type: sap.ui.core.mvc.ViewType.JS
});
app.addPage(masterPage);
app.addPage(detailsPage);
app.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Master.Controller.js
sap.ui.controller("odatacruddemo.Master", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf odatacruddemo.Master
*/
onInit: function() {
var serviceURL = 'http://services.odata.org/V4/OData/OData.svc/Persons?$expand=PersonDetail';
var oModel = new sap.ui.model.json.JSONModel(serviceURL);
oModel.attachRequestCompleted(function(oEvent){
//bind a model to a view
var masterView = sap.ui.getCore().byId("masterPage");
masterView.setModel(oModel);
//sap.ui.getCore().setModel(oModel);
});
//sap.ui.getCore().setModel(oModel);
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf odatacruddemo.Master
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf odatacruddemo.Master
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf odatacruddemo.Master
*/
// onExit: function() {
//
// }
onListPress: function(oEvent){
console.log('List Item pressed');
//Get the Selected Items
//get the row data which has been clicked
var clickedItem = sap.ui.getCore().byId('oProductTable').getSelectedItems();
var cells = clickedItem[0].getCells();
var contexts = sap.ui.getCore().byId("oProductTable").getSelectedContexts();
console.log('Master ctx:');
console.log(contexts);
var items = contexts.map(function(c) {
return c.getObject();
});
console.log(items[0]);
var detailsPage = app.getPage('detailsPage');
detailsPage.setBindingContext(contexts,"data");
app.to(detailsPage);
//var detailsView = sap.ui.getCore().byId("detailsPage");
//detailsView.getModel().setData(items[0]);
//var oContext = oEvent.getSource().getBindingContext();
//console.log(oEvent);
}
});
sap.ui.jsview("odatacruddemo.Details", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf odatacruddemo.Details
*/
getControllerName : function() {
return "odatacruddemo.Details";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf odatacruddemo.Details
*/
createContent : function(oController) {
var oObjectHeader = new sap.m.ObjectHeader({
title: "{Name}",
attributes:[
new sap.m.ObjectAttribute({
text: "{Name}"
})
]
});
var detailsPage = new sap.m.Page({
title: "DetailsPage",
content: [
oObjectHeader
]
});
return detailsPage;
}
});
在上面的代码中,我将bindingContext设置为detailsPage,并且我能够在detailsPage中获得该上下文,但在视图中它没有显示数据
下面是详细页面代码:
Details.view.js
sap.ui.controller("odatacruddemo.Master", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf odatacruddemo.Master
*/
onInit: function() {
var serviceURL = 'http://services.odata.org/V4/OData/OData.svc/Persons?$expand=PersonDetail';
var oModel = new sap.ui.model.json.JSONModel(serviceURL);
oModel.attachRequestCompleted(function(oEvent){
//bind a model to a view
var masterView = sap.ui.getCore().byId("masterPage");
masterView.setModel(oModel);
//sap.ui.getCore().setModel(oModel);
});
//sap.ui.getCore().setModel(oModel);
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf odatacruddemo.Master
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf odatacruddemo.Master
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf odatacruddemo.Master
*/
// onExit: function() {
//
// }
onListPress: function(oEvent){
console.log('List Item pressed');
//Get the Selected Items
//get the row data which has been clicked
var clickedItem = sap.ui.getCore().byId('oProductTable').getSelectedItems();
var cells = clickedItem[0].getCells();
var contexts = sap.ui.getCore().byId("oProductTable").getSelectedContexts();
console.log('Master ctx:');
console.log(contexts);
var items = contexts.map(function(c) {
return c.getObject();
});
console.log(items[0]);
var detailsPage = app.getPage('detailsPage');
detailsPage.setBindingContext(contexts,"data");
app.to(detailsPage);
//var detailsView = sap.ui.getCore().byId("detailsPage");
//detailsView.getModel().setData(items[0]);
//var oContext = oEvent.getSource().getBindingContext();
//console.log(oEvent);
}
});
sap.ui.jsview("odatacruddemo.Details", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf odatacruddemo.Details
*/
getControllerName : function() {
return "odatacruddemo.Details";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf odatacruddemo.Details
*/
createContent : function(oController) {
var oObjectHeader = new sap.m.ObjectHeader({
title: "{Name}",
attributes:[
new sap.m.ObjectAttribute({
text: "{Name}"
})
]
});
var detailsPage = new sap.m.Page({
title: "DetailsPage",
content: [
oObjectHeader
]
});
return detailsPage;
}
});
Details.controller.js
sap.ui.jsview("odatacruddemo.Master", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf odatacruddemo.Master
*/
getControllerName : function() {
return "odatacruddemo.Master";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf odatacruddemo.Master
*/
createContent : function(oController) {
//add columns in a array to be added in table
var aProductTableColumns = [
new sap.m.Column({
header: new sap.m.Text({
text: 'Person ID'
})
}),
new sap.m.Column({
header: new sap.m.Text({
text: 'Name'
})
}),
new sap.m.Column({
header: new sap.m.Text({
text: 'EmployeeID'
})
}),
new sap.m.Column({
header: new sap.m.Text({
text: 'HireDate'
})
}),
new sap.m.Column({
header: new sap.m.Text({
text: 'Salary'
})
}),
new sap.m.Column({
header: new sap.m.Text({
text: 'Operations'
})
})
];
//add the data to the table using cells aggregation by using ColumnListItem
var oTableTemplate = new sap.m.ColumnListItem({
type: "Navigation",
press: [oController.onListPress, oController],
cells: [
new sap.m.ObjectIdentifier({
text: '{ID}'
}),
new sap.m.ObjectIdentifier({
text: '{Name}'
}),
new sap.m.ObjectIdentifier({
text: '{EmployeeID}'
}),
new sap.m.ObjectIdentifier({
text: '{HireDate}'
}),
new sap.m.ObjectIdentifier({
text: '{Salary}',
})
]
}).addStyleClass("sapUiResponsiveMargin");
//oTableTemplate.setType(sap.m.ListType.Active);
//create dialog for updating/editing data
var editPersonDetailsDialog = new sap.m.Dialog({
id: 'editPersonDetailsDialog',
title: 'Update Details'
});
//create table
var oProductTable = new sap.m.Table({
id: 'oProductTable',
columns: aProductTableColumns,
itemPress: [oController.onListPress,oController]
});
//oProductTable.setMode(sap.m.ListMode.SingleSelect);
oProductTable.setMode(sap.m.ListMode.SingleSelectMaster);
//bind the JSON data received from the service with Table
oProductTable.bindItems("/value",oTableTemplate);
var masterPage = new sap.m.Page({
title: "CRUD Operations on Public Odata Service",
content: [
oProductTable
]
});
return masterPage;
}
});
sap.ui.controller("odatacruddemo.Details", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf odatacruddemo.Details
*/
onInit: function() {
console.log('onInit() detailPage called');
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf odatacruddemo.Details
*/
onBeforeRendering: function() {
var detailsPage = sap.ui.getCore().byId('detailsPage');
var context = detailsPage.getBindingContext("data");
console.log('ctx:=>');
console.log(context);
var items = context.map(function(c) {
return c.getObject();
});
console.log(items[0]);
},
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf odatacruddemo.Details
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf odatacruddemo.Details
*/
// onExit: function() {
//
// }
});
在详细信息视图中,控件未显示绑定到它的数据。请帮忙。。。
提前感谢…您的表和控件根本没有任何数据绑定。必须绑定表的项聚合。使用JS视图时,请查看sap.m.Table的此API 首先,您应该使用XMLViews而不是JsViews 有关绑定问题,请查看SAPUI5开发人员。从《开发人员指南》中看一看这个例子,并仔细阅读它
在Master.view.js中,我可以显示我从oData服务获取的数据。。。我已经附上了快照。请查看[1]:[2]:在onListPress中的Master.Controller.js中,尝试以下操作:var sPath=oEvent.getSource().getBindingContent.getPath();bindAggregation(“内容”{path:sPath})。也许您还需要传递一个模板。在您的情况下,ObjectIdentifier。。。还要检查getBindingContext(“数据”)。Tahat看起来不正确,因为您没有使用名称数据定义任何模型。您使用的是标准模型,因此使用getBindingContext()调用它;