Javascript 模型及;Backbonejs中的视图
有人能帮我让这个主干视图渲染工作吗?控制台告诉我“uncaughtreferenceerror:app未定义”,我正在运行的javascript如下:Javascript 模型及;Backbonejs中的视图,javascript,backbone.js,views,models,Javascript,Backbone.js,Views,Models,有人能帮我让这个主干视图渲染工作吗?控制台告诉我“uncaughtreferenceerror:app未定义”,我正在运行的javascript如下: (function() { var App = { Router: {}, Model: {}, View: {} }; /** ** Set states adding and removing classes (show and hide view) *
(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();
})();
我知道在学习主干网/mvc框架的同时尝试学习javascript并不一定是理想的,但我还是在尝试……因此,如果这是一个相当明显的问题,请原谅……并且……谢谢
现在我正在尝试下面的代码并收到相同的错误:
(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();
})();
要能够保存到对象中,您必须创建它。将此添加到
应用程序定义的下方
var app = {
router: {},
model: {},
view: {}
};
顶部声明的App
的定义是大写的,底部的用法是App
-没有大写。我也将视图大写,但我得到了相同的错误。