1

我正在使用一个骨干路由器，Backbone.history.start({pushState: true, root: "/"});并且我正在通过 AJAX 加载页面的部分，并使用Backbone.history.navigate(url, true);它来确保浏览器显示的 url 指向相应的部分。例如，我使用相对 url“/username/profile”加载一个页面，然后通过单击一个选项卡并触发 AJAX 请求来加载该页面上的一个部分（“Favorite Books”），然后将 url 更改为“/用户名/最喜欢的书”。问题是，如果我从通过 ajax 加载的部分返回（使用后退按钮）到上一部分，即使 url 发生更改，页面内容也不会更改。我看过以前的帖子谈论Ajax 浏览器历史，但我想知道在 Backbone 的上下文中我应该怎么做？我找不到问题的明确解释以及如何解决它。准确地说，当点击要加载ajax的部分的选项卡时，我应该在触发的函数中添加什么？我的目标是在使用“后退”按钮时更改 URL 和页面（返回到 AJAX 请求之前的状态）。我目前正在执行以下操作：

RenderSection: function(event) {
    var data = '';
    var url = $(event.currentTarget).attr("href");
    $.post(url, data, function(data){          
        $(".ajax_section").html(data);
        var protocol = this.protocol + '//';
        // Ensure the protocol is not part of URL, meaning its relative.
        if (url && url.slice(protocol.length) !== protocol) {
            Backbone.history.navigate(url, true);
        }
    });
    return false;
},
4

1 回答 1

1

原来我没有正确使用 Backbone。这是我最终使用的，效果很好！

在我的主干视图中，我创建了 2 个方法：第一个在单击带有 class="ajax_enabled" 的链接（锚点）时触发，而第二个由路由器操作中包含的主干事件触发器触发。Backbone View 方法如下所示：

events: {
    'click a.ajax_enabled': 'NavigateToUrl'
}
initialize: function() {
    EventAggregator.on("render:route", this.RenderAjax, this);
},
NavigateToUrl: function(event) {
    var url = $(event.currentTarget).attr("href");
    var protocol = this.protocol + '//';
    // Ensure the protocol is not part of URL, meaning its relative.
    if (url && url.slice(protocol.length) !== protocol) {
        Backbone.history.navigate(url, true);
    }
    return false;
},
RenderAjax: function(route) {
    var data = '';
    var url = window.location.pathname + window.location.search;
    $.post(url, data, function(data){
        $(".ajax_section").html(data);
    });
}

My Backbone Router 处理来自的调用Backbone.history.navigate(url, true);并触发事件以通过默认操作更新视图，如下所示：

  window.EventAggregator = _.extend({}, Backbone.Events);

  var Router = Backbone.Router.extend({
    initialize: function(options) {
        var router = this;
        Backbone.history.start({pushState: true, root: "/", silent: true});
    },
    routes: {
        '' : 'defaultAction',
        '*route': 'defaultAction'
    },
    defaultAction: function(route) {
        if(typeof(route)==='undefined') {
            route = '';
        }
        EventAggregator.trigger("render:route", route);
    }
  });

  return Router;

作为参考，我发现这个其他答案很有帮助，关于使用事件从路由器的视图中触发方法。

于 2013-08-07T16:02:13.820 回答