In the segment below, I have incorporated a variety of routes and view events created using Backbone.js. All the routes seem to be working as expected except for the last one 'products'.
Initially, I had it set up differently but noticed that it wasn't triggering, and even after modifying it to match the other views and routes, it still doesn't function properly.
Does anyone have any insights into why this might be happening? Any help would be greatly appreciated!
I'm relatively new to Backbone. Thanks in advance! Rich
<!doctype html>
<html>
<head>
<title>Undie Couture by Lauren Copeland</title>
<link type="text/css" rel="stylesheet" href="/assets/css/museosans_500_macroman/stylesheet.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/site/front-styles.css" />
</head>
<body>
<div id="wrapper">
<div class="content">
<header>
<div class="container">
<div id="logo"></div>
<nav>
<ul>
<li><a href="/#/products/">shop</a></li>
<li><a href="/#/contact">contact</a></li>
<li><a href="/#/about">about</a></li>
<li><a href="/#/wholesale">wholesale</a></li>
</nav>
</nav>
</div>
</header>
<div class="container">
<div class="page" id="first" style="display:none;"></div>
<div class="page"></div>
</div>
</div>
</div>
</body>
<script type="text/template" id="title-temp">
<%= title %>
</script>
<script type="text/template" id="logo-temp">
<a href="/#/home" id="logo"><img src="/assets/img/logo-strip.png" /></a>
</script>
<script type="text/template" id="home-temp">
<%= title %>
</script>
<script type="text/template" id="page-temp">
<h1><%= page.pluck('title') %></h1>
<div id="body">
<%= page.pluck('body') %>
</div>
</script>
<script type="text/template" id="product-temp">
<h1><%= page.pluck('name') %></h1>
<div id="body">
<%= page.pluck('description') %>
</div>
</script>
<script type="text/javascript" src="/assets/js/libs/jquery/jquery.js"> </script>
<script type="text/javascript" src="/assets/js/libs/underscore/underscore.js"></script>
<script type="text/javascript" src="/assets/js/libs/backbone/backbone-min.js"></script>
<script type="text/javascript" src="/assets/js/libs/bootstrap/bootstrap.js"></script>
<script type = "text/javascript">
var Router = Backbone.Router.extend({
routes: {
"home": "home",
"about": "about",
"contact": "contact",
"wholesale": "wholesale",
"products": "products"
}
});
var Page = Backbone.Model.extend({
initialize: function() {
console.log('Page model loaded');
},
defaults: {
"id": "",
"title": "",
"body": "",
"slug": ""
},
urlRoot: '/backbone/page'
});
var Pages = Backbone.Collection.extend({
initialize: function() {
console.log('pages collection loaded');
},
url: '/backbone/page'
});
var HomeView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {
$('.page').fadeOut('slow');
},
render: function() {
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'home');
var that = this;
that.change();
compiled = _.template($('#home-temp').html(), {
title: ''
});
that.$el.html(compiled);
}
});
var AboutView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {},
render: function() {
console.log('render')
var that = this;
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'about');
aboutPage = new Pages();
aboutPage.fetch({
data: {
id: 3
},
success: function() {
$('#first').fadeOut({
duration: 400,
complete: function() {
console.log(aboutPage.models)
compiled = _.template($('#page-temp').html(), {
page: aboutPage
});
that.$el.html(compiled).delay(300).fadeIn();
}
});
}
});
}
});
var ContactView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {
$('.page').fadeOut();
},
render: function() {
var that = this;
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'contact');
contactPage = new Pages();
contactPage.fetch({
data: {
id: 2
},
success: function() {
$('#first').fadeOut({
duration: 400,
complete: function() {
console.log(contactPage.models)
compiled = _.template($('#page-temp').html(), {
page: contactPage
});
that.$el.html(compiled).delay(300).fadeIn();
}
});
}
});
}
});
var WholesaleView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {},
render: function() {
console.log('render')
var that = this;
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'about');
wholePage = new Pages();
wholePage.fetch({
data: {
id: 4
},
success: function() {
$('#first').fadeOut({
duration: 400,
complete: function() {
console.log(wholePage.models)
compiled = _.template($('#page-temp').html(), {
page: wholePage
});
that.$el.html(compiled).delay(300).fadeIn();
}
});
}
});
}
});
var ProductView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {},
render: function() {
var that = this;
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'about');
wholePage = new Pages();
wholePage.fetch({
data: {
id: 4
},
success: function() {
$('#first').fadeOut({
duration: 400,
complete: function() {
console.log(wholePage.models)
compiled = _.template($('#page-temp').html(), {
page: wholePage
});
that.$el.html(compiled).delay(300).fadeIn();
}
});
}
});
}
});
var router = new Router();
var page_model = new Page();
var page_col = new Pages();
var home = new HomeView();
var about = new AboutView();
var contact = new ContactView();
var wholesale = new WholesaleView();
var products = new ProductView();
router.on('route:home', function() {
home.render();
});
router.on('route:about', function() {
about.render();
});
router.on('route:contact', function() {
contact.render();
});
router.on('route:wholesale', function() {
wholesale.render();
});
router.on('route:products', function() {
products.render();
});
Backbone.history.start();
</script>