Can someone help me get this backbone view render working? The console is telling me "Uncaught ReferenceError: app is not defined," the javascript that I am running is below:
(function() {
var App = {
Router: {},
Model: {},
View: {}
};
/**
** Set states adding and removing classes (show and hide view)
** @Helper Template
**/
function template( id ) {
return $('#' + id).html();
}
/**
** Set states adding and removing classes (show and hide view)
** @Router Main
**/
App.Router.Main = Backbone.Router.extend({
routes: {
'':'vignetteNavView',
'discover': 'discoverView',
'artists': 'artistsView',
'milestones': 'milestonesView',
'archive': 'archiveView',
'about': 'aboutView'
},
hidePages: function() {
var contentAll = $('.page');
contentAll.removeClass('active');
},
vignetteNavView: function(){
var contentVignetteNav = document.getElementById('vignetteNavWrapper');
this.hidePages();
contentVignetteNav.classList.add('active');
},
discoverView: function() {
var contentDiscover = document.getElementById('discoverWrapper');
this.hidePages();
contentDiscover.classList.add('active');
},
artistsView: function() {
var contentArtists = document.getElementById('artistsWrapper');
this.hidePages();
contentArtists.classList.add('active');
},
milestonesView: function() {
var contentMilestones = document.getElementById('milestonesWrapper');
this.hidePages();
contentMilestones.classList.add('active');
},
archiveView: function(){
var contentArchive = document.getElementById('archiveWrapper');
this.hidePages();
contentArchive.classList.add('active');
},
aboutView: function(){
var contentAbout = document.getElementById('aboutWrapper');
this.hidePages();
contentAbout.classList.add('active');
}
});
var mainRouter = new App.Router.Main();
Backbone.history.start();
/**
** Define the Data Model for An Artist
**/
//Artist
App.Model.Artist = Backbone.Model.extend({
defaults: {
"firstName":"Jim",
"lastName":"Nutt",
"bio":"Born in Pittsfield, Massachusetts in 1938, Jim Nutt spent his childhood moving around the United States with his family, including a brief stop in the Chicago suburbs during high school. In 1957, after finishing high school, Nutt spent a year and a half studying architecture at the University of Pennsylvania before transferring to the School of the Art Institute of Chicago in 1960 to study painting. Soon after his arrival at SAIC he met fellow student Gladys Nilsson, and the two married one year later, in 1961. Nutt received his BFA in 1965.",
"work":"A, B, C, etc...",
id:1
}
});
App.View.ArtistView = Backbone.View.extend({
render: function(){
console.log(this.model.get('firstName'));
}
});
app.view.artistsView = new App.View.ArtistsView({model:App.Model.Artist});
app.view.artistsView.render();
})();
I know it's not necessarily ideal to attempt to learn javascript while learning Backbone/an mvc framework, but I am trying nonetheless..so please excuse me if this is a fairly obvious issue...and...Thanks!
Now I'm trying the code below and receiving the same error:
(function() {
/**
** @Namespacing
**/
var App = {
Router: {},
Model: {},
View: {}
};
/**
** Set states adding and removing classes (show and hide view)
** @Helper Template
**/
function template( id ) {
return $('#' + id).html();
}
/**
** Set states adding and removing classes (show and hide view)
** @Router Main
**/
App.Router.Main = Backbone.Router.extend({
routes: {
'':'vignetteNavView',
'discover': 'discoverView',
'artists': 'artistsView',
'milestones': 'milestonesView',
'archive': 'archiveView',
'about': 'aboutView'
},
hidePages: function() {
var contentAll = $('.page');
contentAll.removeClass('active');
},
vignetteNavView: function(){
var contentVignetteNav = document.getElementById('vignetteNavWrapper');
this.hidePages();
contentVignetteNav.classList.add('active');
},
discoverView: function() {
var contentDiscover = document.getElementById('discoverWrapper');
this.hidePages();
contentDiscover.classList.add('active');
},
artistsView: function() {
var contentArtists = document.getElementById('artistsWrapper');
this.hidePages();
contentArtists.classList.add('active');
},
milestonesView: function() {
var contentMilestones = document.getElementById('milestonesWrapper');
this.hidePages();
contentMilestones.classList.add('active');
},
archiveView: function(){
var contentArchive = document.getElementById('archiveWrapper');
this.hidePages();
contentArchive.classList.add('active');
},
aboutView: function(){
var contentAbout = document.getElementById('aboutWrapper');
this.hidePages();
contentAbout.classList.add('active');
}
});
var mainRouter = new App.Router.Main();
Backbone.history.start();
/**
** Define the Data Model for An Artist
**/
//Artist
App.Model.Artist = Backbone.Model.extend({
defaults: {
"firstName":"Jim",
"lastName":"Nutt",
"bio":"Born in Pittsfield, Massachusetts in 1938, Jim Nutt spent his childhood moving around the United States with his family, including a brief stop in the Chicago suburbs during high school. In 1957, after finishing high school, Nutt spent a year and a half studying architecture at the University of Pennsylvania before transferring to the School of the Art Institute of Chicago in 1960 to study painting. Soon after his arrival at SAIC he met fellow student Gladys Nilsson, and the two married one year later, in 1961. Nutt received his BFA in 1965.",
"work":"A, B, C, etc...",
id:1
}
});
var artist = new App.Model.Artist({});
App.View.ArtistView = Backbone.View.extend({
render: function(){
console.log(this.model.get('firstName'));
}
});
artistsView = new App.View.ArtistsView({model:artist});
artistsView.render();
})();