1

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"
4

1 回答 1

1

尝试使用http://backbonejs.org/#Router-navigate导航而不是直接 url，试试这个，如果它有效，你可以使用绑定事件处理程序：

<li><a href="/" onclick="Router.navigate('/');return false;">Home</a></li>
<li><a href="/login" onclick="Router.navigate('/login');return false;">Login</a></li>

我有点不确定这种设置为轮播附加网址是不寻常的。你在任何地方都有这个工作吗？

于 2013-02-19T08:38:45.980 回答