Question

我正在使用带有Backbone.history.start({pushState: true, root: "/"});的Backbone路由器，我正在通过AJAX加载页面部分并使用Backbone.history.navigate(url, true);来确保浏览器显示的URL指向相应的部分。例如，我使用相对URL“/ username / profile”加载页面，然后通过单击选项卡并触发AJAX请求，在该页面上加载一个部分（“收藏书籍”），然后将URL更改为“/用户名/ favorite_book”。问题是，如果我（通过“后退”按钮）返回到通过ajax加载的部分中的上一部分，即使网址更改，页面内容也不会更改。我之前的帖子都在讨论Ajax Browser History，但我想知道在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;
},

Answer 1

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

在我的Backbone View中，我创建了两个方法：第一个是在点击带有class =“ajax_enabled”的链接（锚点）时触发，而第二个是由路由器操作中包含的Backbone Events触发器触发的。 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;

作为参考，我发现this other answer helpful，关于使用事件从路由器触发视图中的方法。

对于包含AJAX的部分和使用Backbone.history.navigate的页面，单击“返回”按钮可更改URL而不更改页面

1 个答案: