Магистральные подмаршруты для вкладок в представлении

У меня есть представление с двумя вкладками. При нажатии на вкладку я хочу:

  1. показать вкладку
  2. изменить хэш на #view/tabName

Если хэш изменится между #view/tab1 и #view/tab2, маршрут не сработает, но в представлении будет отображаться вкладка 2. Если хэш изменился с #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;
});

person Trantor Liu    schedule 17.08.2012    source источник
comment
Итак, как вы переключаетесь между вкладками любых плагинов javascript, да! затем подключитесь к событию (TabChange), и представление отвечает, изменяя хеш, не вызывая обратный вызов маршрутизатора, в противном случае следуйте этой методологии. вкладки, чтобы представления могли подписываться и действовать соответствующим образом   -  person Deeptechtons    schedule 17.08.2012
comment
@Deeptechtons, я отредактировал вопрос.   -  person Trantor Liu    schedule 17.08.2012
comment
поэтому, если вы не хотите запускать маршрут, вы должны использовать метод навигации с параметрами, указывающими не вызывать обратный вызов backbonejs.org/#Маршрутизатор-навигация   -  person Deeptechtons    schedule 17.08.2012
comment
@Deeptechtons: если я установлю replace, не будет истории навигации по вкладкам. Но я хочу, чтобы все еще были истории, но когда пользователь нажимает кнопки «назад/вперед» в браузере, обработчик зависит от предыдущей страницы. Если предыдущая страница некоторое представление, оставьте пользователя в том же представлении, не перезагружая его, и просто переключите вкладку. Если предыдущее представление не некоторое-представление, то обработчик маршрутизатора будет отображать некоторое-представление с начальной вкладкой или без нее.   -  person Trantor Liu    schedule 17.08.2012


Ответы (1)


Вы можете использовать динамическую маршрутизацию, где вы можете указать такие маршруты, как:

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, вы получите «tab1» в качестве параметра tab_name в методе show_tab и то же самое для #view/tab2.

Вы можете перейти по этой ссылке на Thomas Davis, чтобы узнать больше о магистральных маршрутизаторах.

person Cyclone    schedule 17.08.2012
comment
Но я не хочу, чтобы маршрут запускался при переключении между вкладками. - person Trantor Liu; 17.08.2012