2

I have a backbone router with two routes registered like this

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

At the root of the application, when I'm listing the restaurants, I create links for each member of the list

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

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

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

</a>
</script>

When I click on the link, it creates a link like this in the url bar

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

However, there is no indication of the restoDetails function getting called, contrary to what you'd expect from the route registered in the router. For example, this is not logging:

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

    }

However, if I refresh the page with the url like this http://localhost:3000/#restaurants/4, it changes to the same thing but without the hash

http://localhost:3000/restaurants/4

and only then does the restoDetails function completes its log.

Note, in the init function of the app, I also do this

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

Can you explain what's happening with the # such that the restoDetails function is not getting called when I click the link?

I should also note that if I remove the # from the link like this

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

then this problem doesn't exist. however, the tutorial I got the code from uses the # so I assumed it was necessary.

Further to the comment by @muistooshort, which addresses the problem I've described above

If I'm not using pushstate like this

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

Then I'm starting my links with the #

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

and when I click on that link, then the method in the router is getting trigger

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

and the alert is getting called

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

However, if I do use pushstate

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

and I set up the link without the #

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

then if I click that link the alert in the function that should be triggered via the route is not getting called. ie this alert is not happening now.

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

why isn't this alert getting triggered if I click on the link when pushstate is enabled?

I should also note that, when the function isn't getting triggered by the router if I'm using pushstate, it's falling back to the default Rails show action, so the result of render json: @restaurants, root: false is appearing on the page /restaurants/1

4

1 回答 1

1

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

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

如果您只想使用#，请删除该pushState选项：

Backbone.history.start();
于 2013-09-08T22:01:46.487 回答