This article illustrates how you can import a simple Backbone.js Single Page Application in a Script portlet to convert it into a JSR-286 portlet.
NOTE: If you are interested in using AngularJS (Angular 1), ReactJS or Angular (Angular 4), refer to the following articles:
The sample Backbone.js application built in this article demonstrates the functionality of viewing and searching an Employee Directory in Script portlet hosted on WebSphere Portal. As the portlet is rendered, it displays the entire employee list as shown in the figure below.
The user can type in the search box to search by employee name. The search input is a type-ahead field and the employee list displayed is filtered as the user types in the search string.
Rest Services for Sample Application
The application uses the following 2 rest services to get its data.
The REST services listed above returns either a single or collection of following JSON object.
Creating the Employee List Functionality
Create a folder say “EmployeeSearch” and then create a file say “index.html” in that folder with the following code.
Note: The html code above implements the following:
Creates a search input box with id searchValue
Defines a div named employee-target were you will add a backbone.js View that displays the employee list.
Defines the template, employee_list_tpl which defines the UI for a single row of Employee record.