【问题标题】:Backbonejs app automatically loads page `?state=#users` when navigating to `#users`Backbonejs 应用程序在导航到 `#users` 时自动加载页面`?state=#users`
【发布时间】:2024-01-16 05:30:01
【问题描述】:

在我的 backbonejs 应用程序中,当我导航到 router.navigate('users') 时,应用程序会自动将页面重新加载到 example.com/?stat=#users

当我点击后退按钮时,它会加载 URL example.com/#users,因此它可以正确访问所需的页面,然后加载 example.com/?stat=#users

我遇到了什么问题,我尝试更改 trigger 选项但无法解决?而且我无法找到有关?state=#... 是什么的更多信息(我可以做出假设,但简明的文档会很有帮助)?

一个精简的路线文件:

class window.AppRouter extends Backbone.Router
  routes:
    "": "list"
    "users": "list"
    "user/:id": "userDetails"

  list: -> 
    @before()

  before: (callback) ->
    if @users?
      callback() if callback?
    else
      @users = new Users
      @users.fetch(
        success: ->
          $('#sidebar').html(new UsersView({model: app.users}).render().el)
          callback() if callback)

  userDetails: (id) -> 
    @before ->
      user = app.users.get( id)
      if user?
        console.log('inside if')
        app.showView( '#content', new UserView( {model: user}))

  showView: (selector, view) ->
    @currentView.close() if @currentView?
    $(selector).html(view.render().el)
    @currentView = view
    return view

我的精简视图文件:

class window.UsersView extends Backbone.View
  tagName:'ul'
  className: 'nav nav-pills nav-stacked'
  initialize: ->
    @userViews = new Array
    @model.bind("reset", @render, this)
    @model.bind("add", (user) =>
      @$el.append( new UserInListView({model: user}).render().el))

  render: (event) ->
    _.each(
      @model.models
      (user) =>
        userView = new UserInListView( {model: user})
        @userViews.push( userView)
        @$el.append( userView.render().el)
      this)
    return this


class window.UserInListView extends Backbone.View
  tagName:"li"

  initialize: ->
    @template = _.template(tpl.get('user_in_list'))
    @model.bind("change", @render, this)
    @model.bind("destroy", @close, this)

  render: (event) ->
    @$el.html( @template( @model.toJSON()))
    return this

  events:
    "click a": "select"

  select: ->
    $("#sidebar>ul>li.active").removeClass("active")
    @$el.addClass( 'active')
    app.navigate("user/#{@model.id}", true)

class window.UserView extends Backbone.View
  initialize: ->
    templateName = 'user_edit'
    @template = _.template(tpl.get(templateName))
    @model.bind("change", @render, this)

  events:
    "click .cancel": "cancel"

  cancel: ->
    @remove()
    app.navigate('users', false)

我只是不确定是什么原因造成的,是绑定吗?它是推特引导程序吗?这是我设置路由器的方式吗?为什么当我直接访问 url 时我没有遇到问题,但是当我的路由器将我导航到那里时我会遇到问题?

【问题讨论】:

  • router'suser路由的回调方法中的代码是什么??
  • @Cyclone 好的,刚刚扩展了代码。
  • 我不确定问题出在哪里 :( 你在初始化路由器时是否创建了pushState : true ?如果是,你可以尝试不这样做吗?如果app.navigate('users', false) 是路由器导航,那么我不知道'不要以为第二个参数不是怎么传的,可能你可以看看documentation

标签: javascript backbone.js twitter-bootstrap coffeescript


【解决方案1】:

问题必须在<input><select> 标签上包含name 属性[我相信其他人],通过在标签中包含该属性,该属性包含在获取请求中,因此导航时调用它会访问所需的页面,然后使用 name 参数可能是什么来执行 GET 请求。

在我的例子中,我在选择器中留下了一个name='state'(我在访问一个实际拥有state 的用户后意识到这一点,即他们所处的状态,网址是example.com/?state=IL#users 和这个“状态”与正在访问的主干页面的状态无关)。

【讨论】: