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

Question

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

问题在于它不是 SPA(单页应用程序)，但它实际上是一个使用 Backbone.js 的单页。因此，其他页面不使用此框架。仅在这两条 route (/rows 和/rows/search/:params)。

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

我已经尝试了一些东西，也许我没有得到 Backbone 的获取它的方法。

首先，我尝试了 Backbone.history.start({root: '/rows'}); 来告诉应用我只​​想从此路径开始 pushState。发生同样的错误。

所以我认为这可能是我在 View 中处理 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);
  }
});

我也尝试过为 Backbone.history.navigate 更改 window.location.hash，但错误仍然存​​在。实际上，Backbone.history.navigate 是我的第一个镜头，所以我改成了 window.location.hash。

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

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

Answer 1

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

使用

Backbone.history.start()

代替

Backbone.history.start({pushState: true})

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