Question

我有一个骨干路由器，其中有两条路由就是这样注册的

 routes:{
        "":"list",
        "restaurants/:id":"restoDetails"
    },

在应用程序的根目录中，当我列出餐馆时，我为列表中的每个成员创建链接

<script id="restaurantListView" type="text/underscore">

<a href="#restaurants/{{= id }}" class="thumbnail plain">

    <h5>{{= name }}</h5>

</a>
</script>

当我点击链接时，它会在网址栏中创建一个这样的链接

http://localhost:3000/#restaurants/4

但是，没有迹象表明restoDetails函数被调用，这与您对路由器中注册的路由的期望相反。例如，这不是记录：

restoDetails:function (id) {
        console.log('resto');

    }

但是，如果我使用类似于此http://localhost:3000/#restaurants/4的网址刷新页面，它会更改为相同的内容但没有哈希

http://localhost:3000/restaurants/4

然后restoDetails函数才完成其日志。

注意，在应用程序的init函数中，我也这样做

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

你能解释一下#发生了什么，以至于点击链接时没有调用restoDetails函数吗？

我还应该注意，如果我从链接中删除#，就像这样

 <a href="restaurants/{{= id }}"

那么这个问题就不存在了。但是，tutorial我得到的代码使用#所以我认为这是必要的。

除了@muistooshort的评论，它解决了我上面描述的问题

如果我没有像这样使用pushstate

       if (window.history ) {
    Backbone.history.start();
}

然后我开始使用#

建立链接

<a href="#restaurants/{{= id }}"

当我点击该链接时，路由器中的方法正在触发

routes:{
        "":"list",
        "restaurants/:id":"restoDetails"
    },

并且正在调用警报

restoDetails:function (id) {
         alert('in resto');

但是，如果我使用pushstate

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

我设置的链接没有#

 <a href="restaurants/{{= id }}"

然后，如果我单击该链接，则不会调用应该通过路径触发的函数中的警报。即此警报现在没有发生。

restoDetails:function (id) {
             alert('in resto');

如果在启用pushstate时单击链接，为什么不会触发此警报？

我还应该注意，当路由器没有触发该函数时，如果我使用的是pushstate，它会回退到默认的Rails show动作，因此渲染json的结果：@restaurants，root：false出现在页面/餐馆/ 1

Answer 1

您传递给pushState路由器的Backbone选项会激活HTML5历史记录API的使用。

这是现代浏览器可用的一个非常有用的功能，它允许Javascript应用程序控制URL状态。如果您正在为“渐进增强”或“优雅降级”设计应用程序，这很好。换句话说，如果用户没有可用的Javascript，则服务器可以使用相同的URL来呈现页面。我发现这对于需要搜索引擎可访问的应用程序至关重要。你可以拥有两全其美：最佳的用户体验和SEO。

如果您希望仅使用#，请删除pushState选项：

Backbone.history.start();

路由器路由没有被链接触发

1 个答案: