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

Question

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

问题在于它不是一个 SPA（单页应用程序），但它实际上是一个使用 Backbone.js 的单页。所以，其他页面没有使用这个框架。仅在这两条路线中（/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);
  }
});

我也尝试将window.location.hash 更改为Backbone.history.navigate，但错误仍然存​​在。其实Backbone.history.navigate是我的第一枪，所以我改成了window.location.hash。

我的收藏是一个普通的，只有url参数被指定，搜索是通过查询字符串完成的。

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

Answer 1

根据您的 cmets 中的附加信息，/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）。