Как избежать уничтожения зрения позвоночника излишне?

Question

У меня есть представление, в котором показаны две вкладки.

Вкладка видимости контролируется просто классом css. Вот код:

class PlansView extends Backbone.View 
    className: 'plans-view tab1-selected' 

    events: 
    'click .btn-buy': 'buyItems' 
    'click .tab1': 'switchToTab1' 
    'click .tab2': 'switchToTab2' 

    switchToTab1: (event) => 
    this.$el.toggleClass 'tab1-selected', no 
    this.$el.toggleClass 'tab2-selected', yes 
    window.location.hash = 'tab1' 

    switchToTab2: (event) => 
    this.$el.toggleClass 'tab1-selected', yes 
    this.$el.toggleClass 'tab2-selected', no 
    window.location.hash = 'tab2' 

Я использую window.location.hash в функциях, потому что, когда вкладка переключатели, я хочу, чтобы URL, чтобы отразить это. то есть, когда url равен mycompany.com/view#tab1, активируется вкладка 1. Если это mycompany.com/view#tab2, я хочу показать вкладку 2.

Однако произошло то, что: при изменении хэша маршрутизатор запускается! Затем представление выгружается и снова загружается. Он показывает очень четкое визуальное подергивание.

Это соответствующий код в маршрутизаторе:

_showSection: (event) -> 
    sectionView = new PlansView event 

    @previousView?.remove() 

    @previousView = sectionView 
    @$sectionHolder.append sectionView.el 

Если я извлекаю window.location.hash заявления, вкладка переключается очень плавно, но URL будет оставаться unchange.

По какой-то причине pushState отключен в проекте. Я не думаю, что сейчас могу это изменить.

new Router() 
Backbone.history.start pushState: false 

В любом случае я могу обновить хэш без запуска кода маршрутизатора.

Answer 1

Использовать Backbone.history.navigate вместо window.location.hash.

Backbone.history.navigate '#tab1' 

Причина, по которой запускается маршрутизатор, заключается в том, что опорная линия прослушивает изменения хэша и запускает маршрут соответствующим образом.

По умолчанию функция navigate предназначена только для изменения хэша, и если вы хотите запустить маршрут, вам необходимо явно установить параметр trigger: true.