0

我有一个页面，特定用户的 user_idhttp://www.domain.com/user/123在哪里。123有一个选项卡式界面，单击选项卡应使用新 URL 更新地址栏。

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

问题：我正在尝试在backbone.js 中实现pushstates，但在使用.js 时似乎无法正确获取URL app.navigate()。我尝试root在路由器中设置属性，使用Backbone.history.start({ pushState: true, root: "/user/" });它给我根为http://www.domain.com/user/. 如何将 user_id 添加到末尾root？IE。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'));
    });

});

更新代码

从url获取后如何更新root属性？下面显示的当前方法不起作用Backbone.historyuser_id

// 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
});
4

2 回答 2

1

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

var AppRouter = Backbone.Router.extend({

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

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

有关更多信息，请参阅 Backbone文档。不用说，你href应该相应地改变，即href="123/likes".

最后，为了不仅将 url 保存在历史记录中，而且还触发您需要导航的路线，如下所示：

app.navigate(e.target.getAttribute('href'), true);
于 2012-07-31T14:23:44.143 回答
0

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

每当您在应用程序中到达想要保存为 URL 的点时，调用 navigate 以更新 URL。如果您还想调用路由函数，请将触发器选项设置为 true。

所以，要让console.log调试至少工作，试试这个：

app.navigate(e.target.getAttribute('href'), true);
于 2012-07-31T13:58:31.983 回答