В одном из моих проектов мне нужно было использовать адаптивные диаграммы в реальном времени для отображения некоторых данных. Но библиотеки графиков SAPUI5 было недостаточно для обеспечения такой гибкости. Поэтому я решил использовать внешнюю библиотеку для выполнения запроса моего клиента. Проведя небольшое исследование, я понял, что информации об использовании внешних библиотек так мало. Как вы знаете, существует множество отличных библиотек JavaScript для изучения, почему мы их не используем?

If you have not started developing SAPUI5 applications, or don't have an idea where start just check out my previous blogs.

В этом уроке мы собираемся внедрить фреймворк Underscore.js в наш проект.

Underscore.js provides over 100 functions that support both your 
favorite workaday functional helpers: map, filter, invoke — as well 
as more specialized goodies: function binding, javascript templating, 
creating quick indexes, deep equality testing, and so on.
underscorejs.org

Таким образом, Underscore.js — это библиотека, которая предоставляет набор инструментов для управления вашими объектами javascript. Он имеет довольно полезные функции для ваших ежедневных сценариев разработки.

Создадим пустой проект SAPUI5.

Мы могли бы реализовать библиотеку Underscore.js, добавив ее на нашу страницу index.html, используя такие теги скрипта;

<script src="http://underscorejs.org/underscore-min.js"></script>

Но большинство наших систем SAP предназначены только для внутреннего использования, поэтому у них не будет доступа к библиотеке javascript на общедоступном сервере.

Создайте папку с именем lib в своем проекте и добавьте файл с именем «underscore.js».

Сейчас мы собираемся скопировать исходный код Underscore.js и вставить его в наш файл.

Open ;
http://underscorejs.org/underscore-min.js
You will source code of the library copy all and paste it in your
'underscore.js' file.

Right click on code editor after you paste all code 
and click on 'Beautify'.

Вы увидите, что в коде Underscore.js много ошибок и предупреждений. Просто игнорируйте их и сохраняйте файл.

Вы можете проверить все подробности о функциях в Underscore.js по ссылке ниже.

underscorejs.org/#collections

Затем добавьте функцию onInit в файл вашего контроллера и добавьте ключевое слово «отладчик». Мы используем его для отладки нашей функции onInit.

SAPUI5 provides the following lifecycle hooks:
onInit: Called when a view is instantiated and its controls 
(if available) have already been created; used to modify the 
view before it is displayed to bind event handlers and do other 
one-time initialization.
onExit: Called when the view is destroyed; used to free resources 
and finalize activities.
onAfterRendering: Called when the view has been rendered and, 
therefore, its HTML is part of the document; used to do post-rendering manipulations of the HTML. SAPUI5 controls get this hook after being rendered.
onBeforeRendering: Invoked before the controller view is re-rendered 
and not before the first rendering; use onInit() for invoking the hook before the first rendering.

Теперь откройте MainView.controller.js и добавьте нашу новую библиотеку в наш файл контроллера.

Я только что скопировал и вставил несколько примеров в Underscore.js.

Окончательная версия нашего кода;

Теперь нажмите «Выполнить» и откройте инструменты разработчика Chrome с помощью F12 перед запуском приложения.

Оно работает!

Надеюсь, вы найдете его полезным в своих проектах.

Удачного кодирования!