主干.js路由器Pushstates和Root

Question

我有一个页面http://www.domain.com/user/123 ，其中123是特定用户的user_id。 有一个选项卡式的界面，单击选项卡上的应该使用新的URL更新地址栏。

示例：点击<a href="likes" data-toggle="tab">Likes</a>地址栏更新为http://www.domain.com/user/123/likes

问题：我正在尝试在ribs.js中实现推送状态，但是使用app.navigate()时似乎无法正确获取URL。 我尝试使用Backbone.history.start({ pushState: true, root: "/user/" });在路由器中设置root属性Backbone.history.start({ pushState: true, root: "/user/" }); 这使我的根为http://www.domain.com/user/ 。 如何将user_id添加到root的末尾？ 即。 http://www.domain.com/user/123/

//Router
var AppRouter = Backbone.Router.extend({

    routes: {
        '': 'likes',
        'likes': 'likes',
    },

    likes: function() {
        console.log('fn likes');
        $('#tab_likes"').show();
    }
});

var app = new AppRouter();
Backbone.history.start({ pushState: true, root: "/user/" });

$(function() {
    // Update address bar URL
    $('a[data-toggle="tab"]').on('click', function(e) {
        app.navigate(e.target.getAttribute('href'));
    });

});

---

更新的代码

从网址中获取user_id后，如何更新Backbone.history的root属性？ 下面显示的当前方法不起作用

// Router

var AppRouter = Backbone.Router.extend({

    routes: {
        ':user_id/likes': 'likes',
        ':user_id/': 'likes'
    },

    set_user_id: function($user_id) {
        this.user_id = $user_id;
        // ADD SOME CODE TO CHANGE Backbone.history's root attribute
    },

    likes: function($user_id) {
        console.log('fn likes');
        this.set_user_id($user_id);
        $('#tab_likes"').show();
    }
});

var app = new AppRouter();
Backbone.history.start({ 
    pushState: true, 
    root: '/user/' + app.user_id + '/'  // app.user_id is undefined at the time this is called
});

Answer 1

您需要使用参数创建路由以捕获变量用户ID，即

var AppRouter = Backbone.Router.extend({

    routes: {
        ':user/likes': 'likes',
    },

    likes: function(user) {
        console.log(user, 'fn likes');
        $('#tab_likes"').show();
    }
});

有关更多信息，请参见骨干文档 。 不用说，您的href应该相应地更改，即href="123/likes" 。

最后，为了不仅将网址保存在历史记录中，而且还触发了您需要这样导航的路线：

app.navigate(e.target.getAttribute('href'), true);

Answer 2

navigate需要设置trigger选项，如果您希望它实际触发路由处理程序（而不是仅更新URL）。 从文档中 ：

每当您在应用程序中到达要另存为URL的位置时，请调用Navigation以更新URL。 如果您还希望调用路由功能，请将触发选项设置为true。

因此， console.log调试至少可以正常工作，请尝试以下操作：

app.navigate(e.target.getAttribute('href'), true);