Question

我有一些辅助导航，用于某些视图但不是全部。因此，我在使用辅助导航的视图中包含以下内容，该导航无问题：

  setupNavigationSecondary: =>
    view = new App.Views.Users.NavigationSecondary(navigation_active: ".navigation-secondary-manage")
    @$(".navigation-secondary").replaceWith(view.render().el)

您会注意到我传递了“navigation_active”的引用，该引用告诉辅助导航将哪个菜单项标记为活动。辅助导航视图具有以下内容：向右侧菜单项添加“活动”类：

  navigation_active: ""

  initialize: (options) ->
    @navigation_active = options.navigation_active

  setActiveNavigationItem: =>
    if @navigation_active.length
      $(document).ready =>
        $(@navigation_active).parent().addClass('active')

  render: ->
    $(@el).html(@template())

    @setActiveNavigationItem()

    return this

问题：

当首次通过浏览器中的URL直接加载页面时，一切正常，即正确的辅助导航项具有“活动”类。如果我从其他地方开始或者我去其他地方并返回带有辅助导航的视图 - 在执行'$（@ navigation_active）.parent（）。addClass（'active'）'函数后，屏幕上的视图会更新因此，没有菜单项具有“活动”类。

那么，如何在加载辅助导航视图后更新活动导航项？

Answer 1

我忘记了一个重要的项目，问题现在解决了。

  setActiveNavigationItem: =>
    if @navigation_active.length
      $(document).ready =>
        $(@navigation_active).parent().addClass('active')

应该是

  setActiveNavigationItem: =>
    if @navigation_active.length
        // line removed - we don't need to wait for the DOM to be ready
        @$(@navigation_active).parent().addClass('active') // @ symbol

使用jQuery更新重用的BackboneJS视图

1 个答案: