4

我使用 coenraets 的Employee Directory作为我的 Backbone 应用程序的起点。我想做的第一件事是更改路由以使用 HTML5 PushState 而不是 hash-hash bang-bangs。

首先我改变了：

<ul class="nav">
  <li class="active"><a href="/">Home</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

然后：

Backbone.history.start({ pushState: true });

现在，如果您转到localhost:8000/contacts而不是localhost:8000/#/contacts它会给出 404 错误，无论您是单击导航栏还是手动键入 URL。

难道我做错了什么？谢谢。

更新：我添加了这段代码，现在当我点击链接[stateful]时它工作正常。但是，如果我在其中刷新页面，localhost:8000/contacts我仍然会收到 404 error [stateless]。

$(document).on('click', 'a:not([data-bypass])', function(e){
  href = $(this).prop('href')
  root = location.protocol+'//'+location.host+'/'
  if (root===href.slice(0,root.length)){
    e.preventDefault();
    Backbone.history.navigate(href.slice(root.length), true);
  }
});

更新 2

除了上面的代码，我还在我的 Express.js 应用程序中添加了以下路由。如果您仔细观察，您会注意到 URL 栏从localhost:3000/#contact变为 ，localhost:3000/contact尽管它发生得非常快。也许有更好的方法来做这件事，但我暂时对这种方法感到满意。

app.get('/contact', function(req, res) {
  res.redirect('/#contact');
});
4

2 回答 2

2

假设您只有一个 html 文件。您需要对所有路线使用类似的东西来显示相同​​的 html 文件：

app.configure(function () {

  // static files
  app.use(express.static(__dirname + '/public'));

  // default html file (with any request)
  app.use(function (req, res) {
    var contents = fs.readFileSync(__dirname + '/public/index.html');
    res.send(contents.toString());
  });

});

不知道对你有没有用。这是给我的。

于 2013-08-31T23:44:45.573 回答
0

不，这可能不是更新 2 中的最佳方式。

由于我们正在做的是一个单页应用程序，所以我们需要做的只是：

服务器端：对于类似http://yourdomain.com/whatever
的请求，您只需返回页面。 index

前端：
没什么。Backbone 会自动处理它，它会自动将 url http://yourdomain.com/whatever更改为http://yourdomain.com/#whatever。由于我们使用{pushstate: true}，Backbone 会将其更改为http://yourdomain.com/whatever供用户查看。所有这一切都将透明地进行。
（您需要在前端做的就是删除链接#中的url。）

于 2014-03-17T03:48:02.290 回答