i am getting the above error, when clicking on the View option. here is my ViewMovie.html & viewMovie.js
<div data-bind="with : movie">
<h1>Details for <span data-bind="text: Title"></span></h1>
<!-- <div data-bind="text: ko.toJSON($data)"></div>-->
<div id="form-container">
<div class="oj-form oj-md-odd-cols-4 oj-md-labels-inline">
<div class="oj-row">
<div class="oj-col">Sequence Number:</div>
<div class="oj-col"><span data-bind="text: IdNumber"></span></div>
</div>
<div class="oj-row">
<div class="oj-col">Movie Title:</div>
<div class="oj-col"><span data-bind="text: Title"></span></div>
</div>
<div class="oj-row">
<div class="oj-col">Director:</div>
<div class="oj-col"><span data-bind="text: Name"></span></div>
</div>
<div class="oj-row">
<div class="oj-col">Release Year:</div>
<div class="oj-col"><span data-bind="text: Release"></span></div>
</div>
<div class="oj-row">
<div class="oj-col">Movie Genre:</div>
<div class="oj-col"><span data-bind="text: Descr"></span></div>
</div>
</div>
</div>
<button data-bind="click: function() {$parent.editMovie(movieId)}, ojComponent: {component: 'ojButton', label: 'Edit'}"></button>
</div>
*******************************
viewMovie.js
**********************************************************
define(['ojs/ojcore', 'knockout', 'MovieFactory', 'ojs/ojmodel', 'ojs/ojtable', 'ojs/ojbutton'],
function(oj, ko, MovieFactory) {
var viewModel = {
movie: ko.observable(),
initialize: function(params) {
// Make "this" accessible within inner functions
var self = this;
// Fetch the MovieId parameter
var movieId = oj.Router.rootInstance.retrieve();
if(!movieId) {
console.log("No movieId!!!");
}
// Get the movie
var movie = MovieFactory.createMovieModel();
movie.id = movieId;
movie.fetch({
success: function(model) {
self.movie(model.attributes);
},
error: function(model) {
console.log("Fetch error: ", model);
}
});
},
editMovie: function(movieId) {
oj.Router.rootInstance.store(movieId);
oj.Router.rootInstance.go("editMovie");
}
};
return viewModel;
});