2017-04-13 1 views
0

내 OData 서비스의 세 가지 수준을 사용하여 내 앱에서 sap.uxap.ObjectPageLayout을 빌드하려고합니다. "블록"집계를 '{경로 :'노드 ', 템플릿 : oTemplate}'로 바인딩하려고하면 템플릿의 바인딩이 완료되지 않고 콘솔에 많은 오류가 기록됩니다. 여기 은 ObjectPageSubsection + OData의 집계를 깊게합니다.

스 니펫

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv='X-UA-Compatible' content='IE=edge'> 
 
\t \t <meta charset="utf-8"> 
 

 
\t \t <title>MVC with XmlView</title> 
 

 
\t \t <!-- Load UI5, select "sap_belize" theme and the "sap.m" control library --> 
 
\t \t <script id='sap-ui-bootstrap' 
 
\t \t \t src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' 
 
\t \t \t data-sap-ui-theme='sap_belize_plus' 
 
\t \t \t data-sap-ui-libs='sap.m, sap.uxap' 
 
\t \t \t data-sap-ui-xx-bindingSyntax='complex'></script> 
 

 

 
\t \t <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES --> 
 

 
\t \t <!-- define a new (simple) View type as an XmlView 
 
\t \t - using data binding for the Button text 
 
\t \t - binding a controller method to the Button's "press" event 
 
\t \t - also mixing in some plain HTML 
 
\t \t note: typically this would be a standalone file --> 
 

 
\t \t <script id="view1" type="sapui5/xmlview"> 
 
\t \t <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller"> 
 
\t \t \t <App> 
 
\t \t \t \t <Page id="MyPage"/> 
 
\t \t \t </App> 
 
\t \t </mvc:View> 
 
\t </script> 
 

 

 
\t \t <script> 
 
\t \t \t // define a new (simple) Controller type 
 
\t \t \t sap.ui.controller("my.own.controller", { 
 

 
\t \t \t \t // implement an event handler in the Controller 
 
\t \t \t \t onInit: function(){ 
 
\t \t \t \t \t var oPage = this.getView().byId("MyPage"); 
 
\t \t \t \t \t oPage.bindElement("/Employees(9)") 
 
\t \t \t \t \t var oOPL = new sap.uxap.ObjectPageLayout({ 
 
\t \t \t \t \t \t showTitleOnHeader: true, 
 
\t \t \t \t \t \t showTitleInHeaderContent: true, 
 
\t \t \t \t \t \t headerTitle: new sap.uxap.ObjectPageHeader({ 
 
\t \t \t \t \t \t \t isObjectTitleAlwaysVisible: false, 
 
\t \t \t \t \t \t \t isObjectSubtitleAlwaysVisible: false, 
 
\t \t \t \t \t \t \t objectTitle: "{FirstName} {LastName}", 
 
\t \t \t \t \t \t \t objectSubtitle: "{Title}", 
 
\t \t \t \t \t \t \t objectImageShape: "Circle", 
 
\t \t \t \t \t \t \t objectImageURI: "https://sapui5.hana.ondemand.com/test-resources/sap/uxap/images/imageID_275314.png", 
 
\t \t \t \t \t \t }), 
 
\t \t \t \t \t \t headerContent: new sap.m.VBox({ 
 
\t \t \t \t \t \t \t items: [ 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{Address}"}), 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{City} ({Region})"}), 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{Country}"}), 
 
\t \t \t \t \t \t \t ] 
 
\t \t \t \t \t \t }), 
 
\t \t \t \t \t \t sections: [ 
 
\t \t \t \t \t \t \t new sap.uxap.ObjectPageSection({ 
 
\t \t \t \t \t \t \t \t title: "Orders", 
 
\t \t \t \t \t \t \t \t subSections: { 
 
\t \t \t \t \t \t \t \t \t path: "Orders", \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t template: new sap.uxap.ObjectPageSubSection({ 
 
\t \t \t \t \t \t \t \t \t \t title: "Order ID: {OrderID}", 
 
             blocks: { 
 
              path: "Customer", 
 
              template: this.getBlocks() 
 
             } 
 
\t \t \t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t ] \t \t \t \t \t \t 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t oPage.addContent(oOPL); \t \t \t \t \t 
 
\t \t \t \t }, 
 
       
 
       getBlocks: function(){ 
 
        var oInput = new sap.m.Input({value: "{CompanyName}"}) 
 
        //oInput.bindElement("Customer"); 
 
        return oInput; 
 
       } 
 
\t \t \t }); 
 
\t 
 
\t 
 
\t 
 
\t \t \t /*** THIS IS THE "APPLICATION" CODE ***/ 
 
\t \t \t // instantiate the View 
 
\t \t \t var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above 
 

 
\t \t \t // create a Model and assign it to the View 
 
\t \t \t var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access 
 
\t \t \t var oModel = new sap.ui.model.odata.ODataModel(uri, { 
 
\t \t \t \t maxDataServiceVersion: "2.0", 
 
       useBatch: true 
 
\t \t \t }); 
 
\t \t \t myView.setModel(oModel); 
 
\t \t \t // put the View onto the screen 
 
\t \t \t myView.placeAt('content'); 
 

 
\t \t </script> 
 
\t 
 
\t </head> 
 
\t <body id='content' class='sapUiBody'> 
 
\t </body> 
 
</html>

: https://jsbin.com/sikihujuha/edit?html,output

가 나는 템플릿 컨트롤이 내장 될 때마다 바인딩 요소를 일을 해결. 그러나 바인딩을 만드는 대신 항목 당 한 번만 서비스를 호출하고 일괄 요청의 모든 속성을 호출합니다.

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv='X-UA-Compatible' content='IE=edge'> 
 
\t \t <meta charset="utf-8"> 
 

 
\t \t <title>MVC with XmlView</title> 
 

 
\t \t <!-- Load UI5, select "sap_belize" theme and the "sap.m" control library --> 
 
\t \t <script id='sap-ui-bootstrap' 
 
\t \t \t src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' 
 
\t \t \t data-sap-ui-theme='sap_belize_plus' 
 
\t \t \t data-sap-ui-libs='sap.m, sap.uxap' 
 
\t \t \t data-sap-ui-xx-bindingSyntax='complex'></script> 
 

 

 
\t \t <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES --> 
 

 
\t \t <!-- define a new (simple) View type as an XmlView 
 
\t \t - using data binding for the Button text 
 
\t \t - binding a controller method to the Button's "press" event 
 
\t \t - also mixing in some plain HTML 
 
\t \t note: typically this would be a standalone file --> 
 

 
\t \t <script id="view1" type="sapui5/xmlview"> 
 
\t \t <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller"> 
 
\t \t \t <App> 
 
\t \t \t \t <Page id="MyPage"/> 
 
\t \t \t </App> 
 
\t \t </mvc:View> 
 
\t </script> 
 

 

 
\t \t <script> 
 
\t \t \t // define a new (simple) Controller type 
 
\t \t \t sap.ui.controller("my.own.controller", { 
 

 
\t \t \t \t // implement an event handler in the Controller 
 
\t \t \t \t onInit: function(){ 
 
\t \t \t \t \t var oPage = this.getView().byId("MyPage"); 
 
\t \t \t \t \t oPage.bindElement("/Employees(9)") 
 
\t \t \t \t \t var oOPL = new sap.uxap.ObjectPageLayout({ 
 
\t \t \t \t \t \t showTitleOnHeader: true, 
 
\t \t \t \t \t \t showTitleInHeaderContent: true, 
 
\t \t \t \t \t \t headerTitle: new sap.uxap.ObjectPageHeader({ 
 
\t \t \t \t \t \t \t isObjectTitleAlwaysVisible: false, 
 
\t \t \t \t \t \t \t isObjectSubtitleAlwaysVisible: false, 
 
\t \t \t \t \t \t \t objectTitle: "{FirstName} {LastName}", 
 
\t \t \t \t \t \t \t objectSubtitle: "{Title}", 
 
\t \t \t \t \t \t \t objectImageShape: "Circle", 
 
\t \t \t \t \t \t \t objectImageURI: "https://sapui5.hana.ondemand.com/test-resources/sap/uxap/images/imageID_275314.png", 
 
\t \t \t \t \t \t }), 
 
\t \t \t \t \t \t headerContent: new sap.m.VBox({ 
 
\t \t \t \t \t \t \t items: [ 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{Address}"}), 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{City} ({Region})"}), 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{Country}"}), 
 
\t \t \t \t \t \t \t ] 
 
\t \t \t \t \t \t }), 
 
\t \t \t \t \t \t sections: [ 
 
\t \t \t \t \t \t \t new sap.uxap.ObjectPageSection({ 
 
\t \t \t \t \t \t \t \t title: "Orders", 
 
\t \t \t \t \t \t \t \t subSections: { 
 
\t \t \t \t \t \t \t \t \t path: "Orders", \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t template: new sap.uxap.ObjectPageSubSection({ 
 
\t \t \t \t \t \t \t \t \t \t title: "Order ID: {OrderID}", 
 
             blocks: this.getBlocks() 
 
\t \t \t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t ] \t \t \t \t \t \t 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t oPage.addContent(oOPL); \t \t \t \t \t 
 
\t \t \t \t }, 
 
       
 
       getBlocks: function(){ 
 
        //var oInput = new sap.m.Input({value: "{Customer/CompanyName}"}) 
 
        var oInput = new sap.m.Input({value: "{CompanyName}"}) 
 
        oInput.bindElement("Customer"); 
 
        return [oInput]; 
 
       } 
 
\t \t \t }); 
 
\t 
 
\t 
 
\t 
 
\t \t \t /*** THIS IS THE "APPLICATION" CODE ***/ 
 
\t \t \t // instantiate the View 
 
\t \t \t var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above 
 

 
\t \t \t // create a Model and assign it to the View 
 
\t \t \t var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access 
 
\t \t \t var oModel = new sap.ui.model.odata.ODataModel(uri, { 
 
\t \t \t \t maxDataServiceVersion: "2.0", 
 
       useBatch: true 
 
\t \t \t }); 
 
\t \t \t myView.setModel(oModel); 
 
\t \t \t // put the View onto the screen 
 
\t \t \t myView.placeAt('content'); 
 

 
\t \t </script> 
 
\t 
 
\t </head> 
 
\t <body id='content' class='sapUiBody'> 
 
\t </body> 
 
</html>

여기에 해결 방법 : https://jsbin.com/zajacodoce/edit?html,output

어떤 생각이을 개선하기 위해?

답변

0

좋은, 내가 해결의 내 코드에서 하나의 오류를 발견, 라파엘 로페즈를 당신과 안부 감사드립니다. 첫 번째 요소 바인딩을 제대로 확장하지 않았으므로 다음과 같아야합니다. $ expand = Orders/Customer 테스트 결과 오타였습니다.

어쨌든 첫 번째 스 니펫이 작동하지 않습니다. 블록 집계에 url에 다른 "$ 확장"매개 변수가 포함되어 있고 콘솔에 오류가 표시되는 것 같습니다.