Unable to bind my OData Model to the XML View !!!

[chinnu93]

Hi All,

i created Fiori App for PO Approval without Component.js and its working fine. after declared my Component.js unable to bind my odata to xml view.

Header Controller

sap.ui.controller("itpcl.mm.approvepo.controllers.headerDetails", {

onInit: function() {

this.Router = sap.ui.core.UIComponent.getRouterFor(this);
},
hitSearch : function(oEvent){
var aFilters = [];
var sQuery = oEvent.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("PONumber", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
var list = this.getView().byId("idList");
var binding = list.getBinding("items");
binding.filter(aFilters, "Application");
/*var searchField = oEvent.getParameter("query");
var oList = this.getView().byId("idList");
var oFilter = new sap.ui.model.Filter("PONumber",sap.ui.model.FilterOperator.Contains,searchField);
var aFilter = [oFilter];
oList.getBinding("items").filter(aFilter);*/
},
itemPress: function(oEvent){

var path = oEvent.getParameter("listItem").getBindingContextPath();
var po = oEvent.getParameter("listItem").getProperty("title");
console.log(po);
/*var extra = "/PurchaseOrderItem/results/";
var path = path + extra;*/
/*var extra = path.getProperty("POItem");
console.log(extra);*/
var oApp = sap.ui.getCore().byId("idApp");
/*var oView2 = sap.ui.getCore().byId("idItemDetails1");
oView2.bindElement(path);*/
//this.getView().getModel()
var sServiceUrlPo = "proxy/http/122.165.148.177:8000/sap/opu/odata/sap/ZPO_FINAL_SRV";
var user = "";
var pass = "";
var oPo = new sap.ui.model.json.JSONModel();
oPo.setData({
po : po
});
// .setModel(oPo,"po");
var oModelPo = new sap.ui.model.odata.ODataModel(sServiceUrlPo, true, user,pass);
var oJsonModel = new sap.ui.model.json.JSONModel(oModelPo);
/*var surya = this.getView().byId("po").getValue();
var surya = surya;
console.log(surya)*/
oModelPo.read("/PurchaseOrderHeaderCollection('" + po + "')?$expand=PurchaseOrderItem",null,null,true,function(oData,response) {
oJsonModel.setData(oData);
});
//sap.ui.getCore().setModel(oJsonModel,"items");

this.Router.navTo("itemDetails",{
surya : po
});

var oItems = sap.ui.getCore().byId("__component0---idItems");
oItems.bindElement(path);
},

});



Component.js

sap.ui.define([
	"sap/ui/core/UIComponent"
	
], function(UIComponent){
	return UIComponent.extend("itpcl.mm.approvepo.Component",{
		metadata:{
			"routing" :{
				"config" :{
					"routerClass" : "sap.m.routing.Router",
					"viewType"    : "XML",
					"viewPath"    : "itpcl.mm.approvepo.views",
					"controlId"	  : "myApp"
				},
				"routes" : [{
					"pattern" : "", 
					"name"   : "headerDetails",
					"target"  : ["masterTarget"]
					
				},
				
				{
					"pattern" : "", 
					"name"   : "zeroView",
					"target"  : ["zeroTarget"]
				},
				{
					"pattern" : "items/{surya}", 
					"name"   : "itemDetails",
					"target"  : ["itemTarget"]
				}
				
				],
				"targets" : {
					
					"masterTarget" : {
						"viewName" : "headerDetails",
						"viewId"   : "idMaster",
						"controlAggregation" :"masterPages"
						
					},
					"zeroTarget" : {
						"viewName" : "zeroView",
						"viewId"   : "idInitial",
						"controlAggregation" :"detailPages"
						
					},
					"itemTarget" : {
						"viewName" : "itemDetails",
						"viewId"   : "idItems",
						"controlAggregation" :"detailPages"
						
					}
				},
				
			}
		},
		init:function(){
			sap.ui.core.UIComponent.prototype.init.apply(this);
			var oRouter = this.getRouter();
			oRouter.initialize();
			var sServiceUrlPo = "proxy/http/122.165.148.177:8000/sap/opu/odata/sap/ZPO_FINAL_SRV";
			var user = "";
			var pass = "";


			var oModelPo = new sap.ui.model.odata.ODataModel(
					sServiceUrlPo,true, user,pass);
			var oJsonModel = new sap.ui.model.json.JSONModel(
					oModelPo);
			oModelPo
					.read(
							"/PurchaseOrderHeaderCollection?$expand=PurchaseOrderItem",
							null,
							null,
							true,
							function(oData,
									response) {
								oJsonModel
										.setData(oData);
							});
	console.log(oJsonModel);
			this.setModel(oJsonModel,"header");
		
			
			
			
			
		},
		createContent:function(){
			var page1 = sap.ui.view({id:"idHeaderDetails1", viewName:"itpcl.mm.approvepo.views.App", type:sap.ui.core.mvc.ViewType.XML});
//			var page1 = sap.ui.view({id:"idHeaderDetails1", viewName:"itpcl.mm.approvepo.views.headerDetails", type:sap.ui.core.mvc.ViewType.XML});
//			var page2 = sap.ui.view({id:"idItemDetails1", viewName:"itpcl.mm.approvepo.views.itemDetails", type:sap.ui.core.mvc.ViewType.XML});
//			var page3 = sap.ui.view({id:"idZero",viewName:"itpcl.mm.approvepo.views.zeroView",type:sap.ui.core.mvc.ViewType.XML});		
//					var app = new sap.m.SplitApp("idApp",{
//						initialMasterPage:"idHeaderDetails1",
//						initialDetailPage:"idZero",
//						masterPages : [page1],
//						detailPages:[page3,page2]
//					});
//					
  return page1;
		},
		
		destroy: function(){}
	})
	
});

detailsPage XML:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:form="sap.ui.layout.form" xmlns="sap.m"
		controllerName="itpcl.mm.approvepo.controllers.itemDetails" xmlns:html="http://www.w3.org/1999/xhtml">
	
	<Page title="PO Line Item Details">
		
		<content>
	
	<ObjectHeader
	intro ="{PONumber}"></ObjectHeader>
	
	<Input id ="po" type="number" value = "{PONumber}" ></Input>
	
	<List
		id="idList"
		 
		items="{/results}"
		  >
		<items>
			<ObjectListItem
			   
				title="{items>Material}"
				intro="{items>POItem}"
				number = "{items>NetValue}"
				numberUnit = "{items>Currency}"
				/>
		</items>
	</List>
			</content>
		<footer>
			<Toolbar id="otbFooter">
				<ToolbarSpacer />
				<Button type="Accept" text="Approve" press="approve">
					<layoutData>
						<OverflowToolbarLayoutData
							moveToOverflow="false" />
					</layoutData>
				</Button>
				<Button type="Reject" text="Reject" press="reject">
					<layoutData>
						<OverflowToolbarLayoutData
							moveToOverflow="false" />
					</layoutData>
				</Button>
				
				<OverflowToolbarButton press="logout" text="Logout"  icon="sap-icon://log" />


			</Toolbar>
		
	</footer>
	
		</Page>
		
</core:View>