控制器表中的sapui5 JS不具有约束力 [英] sapui5 JS in controller table is not binding
问题描述
index.html
< head>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge/>
< meta charset =UTF-8>
< title> search_help< / title>
< script id =sap-ui-bootstrap
src =../../ resources / sap-ui-core.js
data-sap-ui-libs =sap.m，sap.ui.commons，sap.ui.table，sap.ui.ux3
data-sap-ui-theme =sap_belize
data-sap-ui-compatVersion =edge
data-sap-ui-resourceroots ='{search_help：}'>
< / script>
< link rel =stylesheettype =text / csshref =css / style.css>
< script>
sap.ui.getCore（）。attachInit（function（）{
new sap.m.Shell（{
app：new sap.ui.core.ComponentContainer（{
（content）;
}）;
< / script>
< / head>
< body class =sapUiBodyid =content>
< / body>
view1.view.js
sap.ui.jsview（search_help.view.View1，{
getControllerName：function（）{
returnsearch_help.controller.View1;
}，
createContent：function（oController）{
var oPanel = new sap.ui.commons.Panel（{
text：Select Order ID
}）;
var oLayoutMatrix = new sap.ui.commons.layout.MatrixLayout（{
width：60％，
宽度：[30％，40％，30％]
}）;
var oOrderLabel = new sap.ui.commons.Label（idOrderLabel，
{text：Order ID}）;
//带有值帮助的物料编号的输入字段
var oOrderInput = new sap.ui.commons.ValueHelpField（idOrderInput，{
valueHelpRequest ：function（oEvent）{
var oValueHelpDialog = new sap.ui.ux3.ToolPopup（{
modal：true，
倒置：假，
标题：选择订单号，
开启者：idOrderInput，
关闭：函数（oEvent）{
}
}）;
var oOkButton = new sap.ui.commons.Button（{
text：OK，
press：function（oEvent）{
oEvent.getSource（）。getParent（ ）.close（）;
}
}）;
var oHelpTable = new sap.ui.table.Table（pTab1，{
selectionMode：sap.ui.table.SelectionMode.Single，
visibleRowCount：7，
width ：300pt
}）;
oHelpTable.addColumn（
new sap.ui.table.Column（{
label：new sap.ui.commons.Label（{text：Maintenance Plane}），
template：new sap.ui.commons.TextField（）。bindProperty（value，Planplant），
sortProperty：Planplant，
filterProperty：Planplant
}）
）;
oHelpTable.addColumn（
new sap.ui.table.Column（{
label：new sap.ui.commons.Label（{text：Order Number}），
template：new sap.ui.commons.TextField（）。bindProperty（value，Orderid），
sortProperty：Orderid，
filterProperty：Orderid
}）
）;
oHelpTable.addColumn（
sap.ui.table.Column（{
label：new sap.ui.commons.Label（{text：OrderType}），
template：new sap.ui.commons.TextField（）。bindProperty（value，OrderType），
sortProperty：OrderType，
filterProperty：OrderType
}）
）;
oValueHelpDialog.addContent（oHelpTable）;
oValueHelpDialog.addButton（oOkButton）;
oValueHelpDialog.open（）;
}
}）;
oLayoutMatrix.createRow（oOrderLabel，oOrderInput）;
oPanel.addContent（oLayoutMatrix）;
return oPanel;
}
}）;
view1.controller.js
此处otable显示为未定义
sap.ui.define（[
sap / ui / core / mvc / Controller]，function（Controller）{
use strict;
return Controller.extend（search_help.controller.View1，{
onInit：function（）
{
var oModel = new sap.ui.model.odata.ODataModel（/ Gateway_Order / sap / opu / odata / SAP / ZP01_FIORI_SRV_01 /）;
var oTable = this.byId（pTab1）;
oTable.setModel（oModel）;
oTable.bindRows（/ OrderDataSet）;
}
}）;
}）;
您的问题在于如何获取您的ID
$ b
$ b $ p $ var oTable = sap.ui.getCore（）byId（ pTab1）;
不过，让我们来了解一下Id的创建和获取。
-
在JS视图中，有两种方法可以创建ID。 strong>方式1：：提供直接ID。例如：
var oText = new sap.m.Text（'idText'{text：'Hey！'}）;
现在，这个id -'idText'与您的整个应用程序相关联。所以，如果你有另一个视图，它具有相同的id控件，你会在控制台中看到重复的id错误。
要使用Way1创建id来获取控件，请使用以下方法：
var oControl = sap.ui.getCore（）。byId（'idText'）; //因为这在你的应用程序中是独一无二的。
现在，让我们认为2个或更多开发人员正在应用程序中工作，他们正在创建不同的视图应用程序。他们可能（有很高的可能性），用相同的id创建控件。由于重复的id错误，我们在整合两个视图时应用程序会崩溃。如何解决这个问题？
方式2 ：我们可以使用控制器的 createId（）一个以视图ID为前缀的ID。因此，即使两个开发人员使用相同的ID，这种方式也会由于不同的视图ID而以不同的ID进行控制。
因此，让我们认为我们有两个视图，View1（id：view1）和view2（id：view2）。
在两个控件中的Id（使用控制器的createId（）方法），将生成两个唯一的id，并且重复的id错误永远不会被提升。
因此，查看1（id：view1）：
var oText = new sap.m.Text（oController.createId（'idText'），{text：'Hey！'}）;
oText在视图1中的ID：view1 - idText
同样，
查看2（id：view2）：
var oText = new sap.m.Text（oController.createId（'idText'），{text：'Hey！'}）;
oText在视图2中的ID：view2 - idText
很好地完成了。但是，如果视图ID是自动生成的，我可能不知道我的视图ID是什么？好问题。
解决方法是： this.byId（）。在这种情况下，如果控件的id以视图的ID为前缀，则始终使用 this.byId（）方法。它会为你添加视图的id，然后搜索并返回该视图唯一的控件。
因此，要获取View1的oText，你将使用（在View1的控制器）;
var oText = this.byId（'idText'）//将获取view1 - idText
再次获取View2的oText，您将使用（在View2的控制器中）;
var oText = this.byId（'idText'）//将获取view2 - idText
- 在XML视图中，控件的id始终自动以框架的视图ID为前缀。这与我们的JS 2路相似。 （JS的方法1在XML视图中永远不可能）。
查看代码：
< Text id ='idText'text ='嘿！ /> <！ - Id generated is：'viewid - idText' - >
因此，当您使用XML视图时，的ID总是由：
var oControl = this.byId（'idText'）;
Im trying to create search help using Odata service but my table is showing as undefined in controller, here is my code plz help
index.html
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>search_help</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"search_help": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "search_help"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
view1.view.js
sap.ui.jsview("search_help.view.View1", {
getControllerName: function() {
return "search_help.controller.View1";
},
createContent : function(oController) {
var oPanel = new sap.ui.commons.Panel({
text : "Select Order ID"
});
var oLayoutMatrix = new sap.ui.commons.layout.MatrixLayout({
width : "60%",
widths : [ "30%", "40%", "30%" ]
});
var oOrderLabel = new sap.ui.commons.Label("idOrderLabel",
{text: "Order ID"});
// Input Field for Material Number with Value Help
var oOrderInput = new sap.ui.commons.ValueHelpField("idOrderInput", {
valueHelpRequest: function(oEvent){
var oValueHelpDialog = new sap.ui.ux3.ToolPopup({
modal: true,
inverted: false,
title: "Select Order Number",
opener: "idOrderInput",
closed: function (oEvent){
}
});
var oOkButton = new sap.ui.commons.Button({
text: "OK",
press: function (oEvent) {
oEvent.getSource().getParent().close();
}
});
var oHelpTable = new sap.ui.table.Table("pTab1",{
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCount: 7,
width: "300pt"
});
oHelpTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Maintenance Plane"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Planplant"),
sortProperty: "Planplant",
filterProperty: "Planplant"
})
);
oHelpTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Order Number"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Orderid"),
sortProperty: "Orderid",
filterProperty: "Orderid"
})
);
oHelpTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "OrderType"}),
template: new sap.ui.commons.TextField().bindProperty("value", "OrderType"),
sortProperty: "OrderType",
filterProperty: "OrderType"
})
);
oValueHelpDialog.addContent(oHelpTable);
oValueHelpDialog.addButton(oOkButton);
oValueHelpDialog.open();
}
});
oLayoutMatrix.createRow(oOrderLabel, oOrderInput);
oPanel.addContent(oLayoutMatrix);
return oPanel;
}
});
view1.controller.js here otable is showing as undefined
sap.ui.define([
"sap/ui/core/mvc/Controller"], function(Controller) {
"use strict";
return Controller.extend("search_help.controller.View1", {
onInit: function()
{
var oModel = new sap.ui.model.odata.ODataModel("/Gateway_Order/sap/opu/odata/SAP/ZP01_FIORI_SRV_01/");
var oTable = this.byId("pTab1");
oTable.setModel(oModel);
oTable.bindRows("/OrderDataSet");
}
});
});
Your problem is how you are fetching the Id of your table.
Solution to your problem is :
var oTable = sap.ui.getCore().byId("pTab1");
However, let us understand the Id creation and fetching.
In JS Views, there are two ways to create Ids.
Way 1: : Provide direct Id. Eg:
var oText = new sap.m.Text('idText'{ text:'Hey!'});
Now, this id -'idText' is associated with your entire application. So, if you have another view, which has a control with same id, you will see duplicate id error in console.
To fetch controls with ids creating with Way1, use the below method:
var oControl = sap.ui.getCore().byId('idText'); // since this is unique everywhere in your application.
Now, let us think 2 or more developers are working in an application and they are creating different views for the application. They may ( with high possibility), create controls with same id. The application will crash when we integrate both views due to duplicate id error. How to solve this?
Way 2: We can use the method createId() of the controller to create a Id for prefixed with view's id. So, this way even if two developers are using the same id, they will end up with different id for controls due to different view Id. So, let us think we have two views, View1 ( id: view1) and view2 ( id:view2).
If I create a control with same Id in both the controls (using createId() method of controller), two unique id will be generated and duplicate id error will never be raise.
So, View 1( id: view1):
var oText = new sap.m.Text(oController.createId('idText'),{ text:'Hey!'});
Id of oText in view 1 : view1--idText
Similarly,
View 2( id: view2):
var oText = new sap.m.Text(oController.createId('idText'),{ text:'Hey!'});
Id of oText in view 2 : view2--idText
Nicely done. But what if Id of view is auto generated and I might not know what is my view Id? Good question.
Solution is the method : this.byId(). In the cases, where id of controls are prefixed with view's id, always use the method this.byId(). It will append the view's id for you and then search and return the control unique to that view.
So, to fetch oText of View1, you will use (in View1's controller);
var oText = this.byId('idText')// will fetch view1--idText
Again to fetch oText of View2, you will use (in View2's controller);
var oText = this.byId('idText')// will fetch view2--idText
- IN XML Views, Id of controls are always prefixed with view's id by framework automatically. This is similar to our Way 2 of JS. ( Way 1 of JS is never possible in XML Views).
View code:
<Text id='idText' text='hey! /> <!-- Id generated is: 'viewid--idText' -->
Hence, when you use XML views, fetching of ID is always done by:
var oControl = this.byId('idText');
这篇关于控制器表中的sapui5 JS不具有约束力的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
