Hello Everyone
I am trying to populate a JET table using Common Model and I have followed the approach suggested in JET MOOC Course but my table shows 'Initializing' and there is no error on browser console.
Here goes the code of EmpFactory.js file
define(['ojs/ojcore','ojs/ojmodel'], function (oj) {
var EmpFactory = {
resourceUrl : 'https://codepen.io/cliffsanchez/pen/pbKmEy.html',
// Single Employee Model
createEmpModel : function () {
var emp = oj.Model.extend( {
urlRoot : this.resourceUrl,
idAttribute : "DepartmentId"
});
return new emp();
},
// Employees Collection
createEmployeesCollection : function () {
var employees = oj.Collection.extend( {
url : this.resourceUrl,
model : this.createEmpModel()
});
return new employees();
}
};
return EmpFactory;
});
dashboard.js
/*
* Your dashboard ViewModel code goes here
*/
define(['ojs/ojcore', 'knockout', 'EmpFactory', 'ojs/ojtable','ojs/ojcollectiontabledatasource'],
function (oj, ko, EmpFactory) {
var DashboardViewModel = {
empCollection : EmpFactory.createEmployeesCollection(),
datasource : ko.observable(),
// Called each time the view is shown to the user:
initialize : function () {
this.datasource(new oj.CollectionTableDataSource(this.empCollection));
this.empCollection.fetch();
}
};
return DashboardViewModel;
});
and dashboard.html
<div class="oj-hybrid-padding">
<h1>Dashboard Content Area</h1>
<div id="div1">
<oj-table id="table" summary="Department List"
aria-label="Departments Table"
data='[[datasource]]'
columns='[{"headerText": "Department Id",
"field": "DepartmentId"},
{"headerText": "Department Name",
"field": "DepartmentName"},
{"headerText": "Location Id",
"field": "LocationId"},
{"headerText": "Manager Id",
"field": "ManagerId"}]'>
</oj-table>
</div>
</div>
Please let me know where I am doing wrong.
Thanks