我有一个视图,其中显示了两个选项卡。
标签可见性仅由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
,因为当标签切换时,我希望网址反映这一点。即,当网址为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
语句,则标签切换非常顺畅,但网址将保持不变。
由于某种原因,在项目中禁用了pushState。我认为我现在不能改变它。
new Router()
Backbone.history.start pushState: false
无论如何,我可以在不触发路由器代码的情况下更新哈希值。
答案 0 :(得分:1)
使用Backbone.history.navigate
代替window.location.hash
。
Backbone.history.navigate '#tab1'
触发路由器的原因是因为Backbone监听散列更改并相应地触发路由。
navigate
函数的默认行为仅用于更改哈希,如果要触发路由,则需要显式设置trigger: true
选项。