如何正确使用HTML5的pushState的Backbone.js的？ [英] How to properly use HTML5 pushState in Backbone.js?

问题描述

我使用coenraets员工目录作为一个起点，我的骨干应用。我愿做的第一件事就是改变路由使用HTML5 pushState的，而不是哈希散列邦刘海。

首先，我已经改变了：

 ＆LT; UL类=导航＆GT;
  ＆LT;李班=主动＆GT;＆LT; A HREF =/＆GT;家庭和LT; / A＆GT;＆LT; /李＆GT;
  ＆LT;立GT;＆LT; A HREF =/接触＆GT;联系与LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

然后：

Backbone.history.start（{pushState的：真正}）;

如果你去

现在本地主机：8000 /触点而不是本地主机：8000 /＃/联系人它给404错误，不管你是否点击的导航栏或手动输入的网址。

我是不是做错了什么？谢谢你。

更新：我添加了这个$​​ C $ C，现在当我点击一个链接，它工作正常的 [状态] 。但是，如果我刷新页面，而我在本地主机：8000 /触点我仍然得到404错误的 [无国籍]

 的$（document）。在（'点击'，'一：不使用（数据旁路]）'，函数（E）{
  HREF = $（本）.prop（'href属性）
  根= location.protocol +'//'+ location.host +'/'
  如果（根=== href.slice（0，root.length））{
    亦即preventDefault（）;
    Backbone.history.navigate（href.slice（root.length），TRUE）;
  }
}）;
 

更新2

在除上述code，我在我的前press.js应用程序增加了以下路线。如果你仔细观察，你会发现从本地主机地址栏的变化：3000 /＃接触到本地主机：3000 /接触虽然它发生pretty快。或许有更好的方式来做到这一点的事情，但我很满意这种方法来暂时

  app.get（'/'接触，功能（REQ，RES）{
  res.redirect（'/＃联系人'）;
}）;
 

解决方案

假设你只有一个HTML文件。你需要使用类似的东西，你所有的路线显示相同的HTML文件：

  app.configure（函数（）{  //静态文件
  app.use（如press.static（__目录名称+'/公'））;  //默认的HTML文件（任何请求）
  app.use（功能（REQ，RES）{
    VAR内容= fs.readFileSync（__目录名称+'/public/index.html'）;
    res.send（contents.toString（））;
  }）;}）;
 

我不知道，如果是对您有用。这对我来说。

I am using coenraets' Employee Directory as a starting point for my Backbone application. The first thing I would like to do is to change routing to use the HTML5 PushState instead of hash-hash bang-bangs.

First I have changed:

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

Then:

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

Now if you go to localhost:8000/contacts instead of localhost:8000/#/contacts it gives 404 error, regardless if you clicked on the Navbar or typed the URL manually.

Am I doing something wrong? Thanks.

UPDATE: I added this code and it works fine now when I click on a link [stateful]. But if I refresh the page while I am in localhost:8000/contacts I still get 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);
  }
});

Update 2

In addition to the above code, I have added the following route in my Express.js app. If you look closely you'll notice the URL bar changes from localhost:3000/#contact to localhost:3000/contact although it happens pretty fast. Perhaps there is a better way to do this thing, but I am satisfied with this approach for time being.

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

解决方案

Assume that you have just one html file. You need use something like that for all your routes display the same html file:

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());
  });

});

I don't know if is useful for you. It was for me.

这篇关于如何正确使用HTML5的pushState的Backbone.js的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！