Backbone.js в не SPA-приложении проблемы при просмотре истории - PullRequest
Новая
       15

Backbone.js в не SPA-приложении проблемы при просмотре истории

3 голосов
/ 05 января 2012

Я недавно начал разработку с Backbone.js. В этом приложении у меня есть экран, на котором я могу отфильтровать множество строк по нескольким фильтрам, например: дата, состояние и т. Д.

Проблема в том, что это не SPA (одностраничное приложение), а фактически одна страница, которая использует Backbone.js. Итак, другие страницы не используют этот фреймворк. Только на этих двух маршрутах (/rows и /rows/search/:params).

Нет проблем, когда я просматриваю эти маршруты, он загружается и работает отлично. Проблема возникает, когда я, например, просматриваю /login, который полностью обновляет страницу, а затем нажимает кнопку возврата истории. Когда я нажимаю кнопку возврата, мне показывается последний JSON, вызванный методом Model.fetch.

Я пробовал кое-что, может быть, у Бэкбона не было способа его извлечь.

Сначала я попытался Backbone.history.start({root: '/rows'}); сообщить приложению, что я хотел бы нажать PushState только с этого пути. Произошла та же ошибка.

Так что я подумал, что это может быть способ обработки pushState в View. Итак, я делаю так: 

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?

1 Ответ

1 голос
/ 06 января 2012

Исходя из дополнительной информации в ваших комментариях, похоже, что / rows / search / foo направляет серверную часть к / rows? Q = foo. Попробуйте отключить pushState.

использование

Backbone.history.start ()

вместо

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

Если поведение теперь исправлено, то это проблема маршрутизации на стороне сервера. Если вы все еще хотите использовать pushState, вам нужно убедиться, что любой URL, начинающийся с «/ row» (например, / row / search / foo), возвращает тот же HTML, что и «/ row». Это, конечно, будет означать, что вам нужно будет использовать другой шаблон URL для ваших запросов ajax (например, / api / row? Q = foo вместо /rows?q=foo).

...