视图中选项卡的主干子路由

时间:2012-08-17 04:50:53

标签: backbone.js tabs backbone-views backbone-routing

我有两个标签的视图。单击选项卡时,我想:

  1. 显示标签
  2. 将哈希值更改为#view/tabName
  3. 如果哈希在#view/tab1#view/tab2之间发生变化,则路线不会触发,但视图会显示 tab2 。如果哈希值从#anotherView更改为#view/tabName,则路径将触发,并使用初始标签 tabName 呈现视图。

    总结一下,当散列在具有相同前缀#view的哈希值之间更改时,视图将处理该事件,否则路由器

    这是我目前的代码。

    // router.js
    define('router', [
        'jquery'
        , 'underscore'
        , 'backbone'
        , 'SomeView'
    
    ], function (
        $, _, backbone, SomeView
    ) {
        var router;
    
        router = backbone.Router.extend({
            routes: {
                'some-view': someView
                , 'some-view/:tab': someView
            }
            , initialize: function () {
    
            }
            , someView: function (tab) {
                var view; 
                view = new SomeView(tab);
                view.on('router:changeTab', function (tab) {
                    that.navigate('some-view/' + tab);
                });
    
    
            }
        });
        return router;
    });
    
    // someView.js
    define('SomeView', [
        'jquery'
        , 'underscore'
        , 'backbone'
    ], function (
        $, _, backbone
    ) {
        var SomeView;
    
        SomeView = backbone.View.extend({
    
            initialize: function (options) {
                this.tab = options.tab;
    
            }
            , render: function (callback) {
    
                // show the initial tab if given
                if (this.tab) {
                    setTimeout(function () {
                        that.$el.find('[href="#' + that.tab + '-tab"]').click();
                    }, 0);
                }
    
                return this;
            }
            , events: {
                , 'click .nav-tabs>li>a': 'showTab' // enable tabs
            }
    
            , showTab: function (e) {
                var that, tab, tabs;
                that = this;
                e.preventDefault();
                $(this).tab('show');  // I'm using bootstrap tab plugin
                // update hash
                tab = $(e.currentTarget).attr('href').split('-')[0].split('#')[1];
                that.trigger('router:changeTab', tab);
                // What I didn't know is how to prevent the handler from being 
                // invoked when the user press backward/forward button on the browser,
                // and let this view handle it (show the corresponding tab). 
            }
        return SomeView;
    });
    

1 个答案:

答案 0 :(得分:0)

您可以使用动态路由,您可以在其中指定路径,如:

routes : {
  "view/:tab_name" : "show_tab",
  "otherRoutes" : "other_methods"
},

show_tab : function(tab_name) {
  // render tab based on the parameter you receive
}

因此,如果地址栏中包含url#view / tab1,那么你会在show_tab方法中接收'tab1'作为tab_name参数,并且同样也会收到#view / tab2的相同内容。

您可以this link引用Thomas Davis以了解有关骨干路由器的更多信息。