lesson2-part04.md

Lesson 2 - Part 4

Homework research:

• Developer Guide: Integrating REST Services
• REST Countries
• Developer Guide: Dealing With Cross-Origin Resource Sharing (CORS)
• jQuery
• Cookbook: Oracle JET Common Model
• Developer Guide: Using the Common Model and Collection API

Source code

ViewModel with jQuery:

define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojtable', 'ojs/ojarraytabledatasource'],
        function (oj, ko, $) {
            function AboutViewModel() {
                var self = this;
                self.data = ko.observableArray();
                $.getJSON("https://restcountries.eu/rest/v2/all").
                        then(function (countries) {
                            var tempArray = [];
                            $.each(countries, function () {
                                tempArray.push({
                                    name: this.name,
                                    population: this.population,
                                    capital: this.capital
                                });
                            });
                            self.data(tempArray);
                        });
                self.datasource = new oj.ArrayTableDataSource(
                        self.data,
                        {idAttribute: 'name'}
                );
            }
            return new AboutViewModel();
        }
);

Factory with Oracle JET Common Model:

define(['ojs/ojcore'], function (oj) {
    var CountryFactory = {
        resourceUrl: 'https://restcountries.eu/rest/v2/all',
        // Create a single country instance:
        createCountryModel: function () {
            var Country = oj.Model.extend({
                urlRoot: this.resourceUrl, 
                idAttribute: "name"
            });
            return new Country();
        },
        // Create a country collection:
        createCountryCollection: function () {
            var Countries = oj.Collection.extend({
                url: this.resourceUrl, 
                model: this.createCountryModel()
            });
            return new Countries();
        }
    };
    return CountryFactory;
});

ViewModel loading the Factory and referencing it:

define(['ojs/ojcore', 'knockout', 'jquery', 'factories/CountryFactory',
    'ojs/ojtable', 'ojs/ojcollectiontabledatasource'],
        function (oj, ko, $, CountryFactory) {

            function AboutViewModel() {
                var self = this;
                self.countryCollection = CountryFactory.createCountryCollection();
                self.datasource = ko.observable();
                self.datasource(new oj.CollectionTableDataSource(self.countryCollection));
                ...
                ...
                ...
                

View that works with either of the ViewModels above:

<div class="oj-hybrid-padding">
    <h1>Customers Content Area</h1>
    <oj-table id='table' aria-label='Departments Table'
              data='[[datasource]]' 
              columns-default.sortable='disabled' 
              columns='[
                 {"headerText": "Name", "field": "name"},
                 {"headerText": "Population", "field": "population"},
                 {"headerText": "Capital", "field": "capital"}]'>
    </oj-table>
</div>