如何避免不必要地破坏主干视图?

时间:2017-02-17 05:03:48

标签: backbone.js coffeescript

我有一个视图,其中显示了两个选项卡。

标签可见性仅由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

无论如何,我可以在不触发路由器代码的情况下更新哈希值。

1 个答案:

答案 0 :(得分:1)

使用Backbone.history.navigate代替window.location.hash

Backbone.history.navigate '#tab1'

触发路由器的原因是因为Backbone监听散列更改并相应地触发路由。

navigate函数的默认行为仅用于更改哈希,如果要触发路由,则需要显式设置trigger: true选项。