I am not clear how to get the ojet data source with common collections to work based on the example in the training video.
I tried the following:
moviefactory.js:
-------------------
define(['ojs/ojcore'],
function(oj) {
var MovieFactory = {
resourceURL: 'http://movieapp-sitepointdemos.rhcloud.com/api/movies',
//Create Single Movie Instance
createMovieModel: function(){
var Movie = oj.Model.extend({
urlRoot: this.resourceURL,
idAttribute: "_id"
});
return new Movie();
},
createMovieCollection: function(){
var Movies = oj.Collection.extend({
url: this.resourceURL,
model: this.createMovieModel()
});
return new Movies();
}
};
return MovieFactory;
});
library.js:
----------
define(['ojs/ojcore', 'knockout', 'MovieFactory', 'ojs/ojmodel', 'ojs/ojtable', 'ojs/ojcollectiontabledatasource'],
/**
* The view model for the main content view template
*/
function (oj, ko) {
function viewModel() {
var self = this;
var viewModel = {
movieCollection: self.MovieFactory.createMovieCollection(),
dataSource: ko.observable(),
initialize: function () {
this.dataSource(new ojCollectionTableDataSource(this.movieCollection));
this.movieCollection.fetch();
}
};
}
return viewModel;
});
library.html:
-----------
<h1>Library Content</h1>
<table data-bind="ojComponent: {component: 'ojTable',
data: dataSource,
columns: [
{headerText: 'Director', field: 'director' },
{headerText: 'Title', field: 'tile' },
{headerText: 'Genre', field: 'genre' },
{headerText: 'Year', field: 'year' },
]
}">
</table>