Backbone：刷新当前路由答案

【问题标题】：Backbone: Refresh the current routeBackbone：刷新当前路由
【发布时间】：2013-01-25 17:04:17
【问题描述】：

我注意到主干路由器的导航方法不会重新加载当前路径。

例如，当前路由是/view1，而您调用router.navigate('view1',{trigger:true});。它不会再次激活路由事件。

这是我测试的代码：

<html>
<head>
    <title>Testing123</title>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
    <script src="http://backbonejs.org/backbone-min.js" type="text/javascript"></script>
    <style type="text/css" media="screen">
        #box{
            width:400px;
            height:400px;
            background-color:red;
        }       
    </style>
</head>
<body>
    <button id='view1'>view1</button>
    <button id='view2'>view2</button>
    <br/>
    <div id='box'>

    </div>
    <script type="text/javascript" charset="utf-8" async defer>
        var SystemRouter = Backbone.Router.extend({

          routes: {
            "view1":"view1",
            "view2":"view2"
          },

          view1: function() {
            console.log('view1');
          },

          view2: function() {
            console.log('view2');
          }

        });

        var sys = new SystemRouter();
        Backbone.history.start({pushState: true, root: "/test/routing.html#/"});
        sys.navigate('view1');

        $('#view1').click(function(){
            sys.navigate('view1',{trigger:true});
        });

        $('#view2').click(function(){
           sys.navigate('view2',{trigger:true});
        }); 
    </script>
</body>
</html>

上面的代码将加载/view1 路径，打印出'view1'。但是如果您尝试单击按钮导航到/view1 路径，它将被忽略。

我的问题是：如果路由事件和当前路径相同，怎么调用？

【问题讨论】：

标签： backbone.js

【解决方案1】：

有几件事可以做到这一点。如果您预计导航到 url 中已经存在的路由，则首先使用 Backbone.history.fragment 检查当前路由片段，看看它是否与您要激活的路由相同。如果是这样，那么您可以执行以下任何操作：

你可以直接调用路由方法：sys.view1();
您可以将片段设置为另一个死路由，然后返回您想要的路由。

sys.navigate('someDeadRoute'); sys.navigate('view1',{trigger: true});
您可以停止并重新启动路由器：

Backbone.history.stop(); Backbone.history.start()

这将再次拾取路线并运行它。

我想我会选择#1。

【讨论】：

在我可以通过此解决方案之前，我已经尝试过选项 1，但是当我尝试返回时，路线会更新，但视图不会。您遇到过这个问题吗？

【解决方案2】：

您可以致电Backbone.history.loadUrl，而不是启动和停止 Backbone 的历史记录。

刷新当前页面：

Backbone.history.loadUrl(Backbone.history.fragment);

或作为链接处理程序：

// `Backbone.history.navigate` is sufficient for all Routers and will trigger the
// correct events. The Router's internal `navigate` method calls this anyways.
var ret = Backbone.history.navigate(href, true);

// Typically Backbone's history/router will do nothing when trying to load the same URL.
// But since we want it to re-fire the same route, we can detect 
// when Backbone.history.navigate did nothing, and force the route.
if (ret === undefined) {
    Backbone.history.loadUrl(href);
}

【讨论】：

这似乎对我有用，并且您不会以这种方式丢失状态，而您确实会通过停止和启动历史记录来丢失状态？