如何避免不必要地破坏主干视图？答案

【问题标题】：How to avoid destroying backbone view unnecessarily?如何避免不必要地破坏主干视图？
【发布时间】：2017-07-06 11:58:57
【问题描述】：

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

选项卡的可见性仅由 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 将保持不变。

由于某种原因，pushState 在项目中被禁用。我认为我现在无法更改此设置。

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

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

【问题讨论】：

标签： backbone.js coffeescript

【解决方案1】：

使用Backbone.history.navigate 而不是window.location.hash。

Backbone.history.navigate '#tab1'

Router被触发的原因是Backbone监听hash变化并相应触发路由。

navigate函数的默认行为只是改变hash，如果要触发路由，需要显式设置trigger: true选项。

【讨论】：