I'm developing a single-page Meteor application and i'm handling the routing using Backbone.js. I'm trying to navigate the pages like a carousel, so when I click a menu item in the navigation the page will slide left or right to reveal the chosen page. However, the problem is whenever I click a link the entire page would reload and this interferes with the carousel transition. I want to prevent the page from reloading when I click a link, like what AngularJS does but i'm having troubles making it work. I'm trying not to use # links because the spiderable meteor package says that only real links are visible to spiders. Does anyone have a solution?
This is the HTML:
<div id="main-navbar" class="navbar">
<div class="navbar-inner rectangle-navbar">
<div class="container">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/login">Login</a></li>
</ul>
</div>
</div>
</div>
and this is the Coffeescript:
Router = Backbone.Router.extend
routes:
"": "main"
"login": "login"
login: ->
slideCarousel 0, false
main: ->
slideCarousel 1, true
appRouter = new Router
Meteor.startup ->
Backbone.history.start pushState: true
slideCarousel = (slideId, visibility) ->
$("#content").carousel slideId
$('#content').carousel "pause"
if visibility == false
$("#landing").hide "slow"
else
$("#landing").show "slow"