非SPA应用程序中的Backbone.js在浏览历史记录时出现问题

Backbone.js in a not SPA application issues when browsing history

本文关键字：记录 历史 问题 浏览 应用程序 SPA js Backbone      更新时间：2023-09-26

我最近开始使用Backbone.js进行开发。在这个应用程序中，我有一个屏幕，可以通过多个过滤器过滤很多行，例如：日期、状态等。

问题是，它不是一个SPA（单页应用程序），而是一个使用Backbone.js的单页。因此，其他页面没有使用这个框架。仅在这两个路由（/rows和/rows/search/:params）中。

当我在这些路线之间浏览时没有问题，它正在加载并完美工作。例如，当我浏览/login时，就会出现问题，它会刷新整个页面，然后单击历史返回按钮。当我点击返回按钮时，我会看到Model.fetch方法调用的最后一个JSON。

我试过一些东西，也许我没有Backbone的方法来获取它。

首先，我尝试Backbone.history.start({root: '/rows'});告诉应用程序我只想从上的这个路径推送State。发生了同样的错误。

所以我认为这可能是我处理视图中的pushState的方式。所以，我这样做：

App.View.Rows = Backbone.View.extend({
  el: $(document.body),
  events:{ // my events },
  initialize: function() {
    this.model = new App.Collection.Model();
    this.model.bind('reset', this.render, this);
  },
  submitForm: function(ev) {
    ev.preventDefault();
    this.search(ev);
    return false;
  },
  openFilters: function() {
    var el = this.el.find('div.box_content');
    if (!el.is(':visible')) el.slideDown();
  },
  resetFilters: function() {
    window.location.hash = "/rows";
  },
  populate: function(opts) {
    var opts = opts || (opts = {});
    if (this.lastFetch) this.lastFetch.abort();
    this.lastFetch = this.tasks.fetch({data: opts});
  },
  render: function() {
     // logic to render results
  },
  search: function(ev) {
    this.doSearch( this.getFilterOptions() );
  },
  getFilterOptions: function() {
    var opts = //get url params
    return opts;
  },
  doSearch: function( opts ) {
    window.location.hash = '/rows/search/' + $.param(opts);
  }
});

我还尝试将window.location.hash更改为Backbone.history.navigate，但错误仍然存在。事实上，Backbone.history.navigate是我的第一枪，所以我改为window.location.hash.

我的集合是一个普通的集合，只指定了url参数，并通过查询字符串进行搜索。

伙计们，这可能是什么？为什么当我回溯历史时，它显示的是JSON，而不是启动Backbone.js路由器？我该如何解决这个问题？是否可以在单个页面中使用Backbone.js而不是SPA？

根据您评论中的附加信息，/rows/search/foo似乎正在将服务器端路由到/rows？q=foo。尝试关闭pushState。

使用

Backbone.history.start（）

而不是

Backbone.history.start（｛pushState:true｝）

如果行为现在已经修复，那么这就是服务器端路由问题。如果您仍然想使用pushState，您需要确保任何以"/rows"开头的URL（例如/rows/search/foo）返回的HTML与"/rrows"相同。这当然意味着您需要为ajax请求使用不同的URL模式（例如/api/rows？q=foo而不是/rows吗？q=foo）。

相关文章：