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
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>