Пример использования Binding для передачи информации по продукту на другую страницу приложения

Для реализации, уже должно быть реализовано UI5 приложение, содержащее несколько страниц.

Как это сделать, можно посмотреть вот тут https://hysterical.ru/2018/10/02/sapwebiderouters/

1) В массиве routing файла manifest.json нужно определить имя URL параметра, с помощью которого будет передаваться информация по продукту.

		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "RoutingDemo.view",
				"targetAggregation": "pages"
			},
			"routes": [{
				"pattern": "",
				"name": "view1",
				"view": "view1",
				"targetAggregation": "pages",
				"controlId": "app"
			},
			{
				"pattern": "View2/{product}",
				"name": "view2",
				"view": "view2",
				"targetAggregation": "pages",
				"controlId": "app"
			}]
		}

"routing": {

"config": {

"routerClass": "sap.m.routing.Router",

"viewType": "XML",

"viewPath": "RoutingDemo.view",

"targetAggregation": "pages"

"routes": [{

"pattern": "",

"name": "view1",

"view": "view1",

"targetAggregation": "pages",

"controlId": "app"

{

"pattern": "View2/{product}",

"name": "view2",

"view": "view2",

"targetAggregation": "pages",

"controlId": "app"

}]

}

Обращаю внимания на параметр “pattern”: “View2/{product}”

здесь, при помощи фигурных скобок добавляется наименование URL параметра.

2) Идем в контроллер первого представления. Ищем место, где происходит обращение к классу роутера для навигации на вторую страницу приложения (в нашем случае это просмотр подробной информации по продукту)

У меня это событие OnClick.

Создаем JSON объект, который передаем в URL параметр при переходе на другую страницу

OnClick: function(Event) {
			
	var data = { name : "Product_1" };
			
	var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
	oRouter.navTo("view2", {
		product: JSON.stringify(data)
	});
}

OnClick: function(Event) {

var data = { name : "Product_1" };

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

oRouter.navTo("view2", {

product: JSON.stringify(data)

});

}

3) Для примера мы будем выводить наименование продукта в заголовок второй страницы.

В представлении добавляем соответствующую разметку

<Page title="{product>/name}">
     <content/>
</Page>

</Page>

Здесь, с помощью {product>/name} мы говорим, что берем параметр name из модели данных product, и присваиваем это значение заголовку

4) Осталось написать код во втором контроллере

При инициализации назначаем процедуру привязки модели данных

onInit: function() {
	var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
	oRouter.getRoute("view2").attachPatternMatched(this._onObjectMatched, this);
}

onInit: function() {

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

oRouter.getRoute("view2").attachPatternMatched(this._onObjectMatched, this);

}

Осуществляем привязку модели данных представлению, и привязку значений

_onObjectMatched: function (oEvent) {
			
	var data = JSON.parse(oEvent.getParameter("arguments").product);
	var oModel = new sap.ui.model.json.JSONModel( );
	oModel.setData(data);
			
	this.getView().setModel(oModel, "product");
			
	this.getView().bindElement({
		path: oEvent.getParameter("arguments").product,
		model: "product"
	});
			
}

_onObjectMatched: function (oEvent) {

var data = JSON.parse(oEvent.getParameter("arguments").product);

var oModel = new sap.ui.model.json.JSONModel( );

oModel.setData(data);

this.getView().setModel(oModel, "product");

this.getView().bindElement({

path: oEvent.getParameter("arguments").product,

model: "product"

});

}