jquery - 主干网和jqm : back button how to restore page context

Question

我正在使用 Backbone、require 和 jQuery mobile 作为技术堆栈构建 HTML5 移动应用程序。该应用程序非常流畅，可以连接到后端 Web 服务等。为了在页面之间进行更改，我使用 jQuery changePage。为了实例化 Backbone View ，我使用以下策略:

$( document ).delegate("#card-delivery-address", "pageshow", function(){
    require(["js/views/cardDeliveryAddressViews.js" ], function(cardDeliveryAddressViews) {
        new cardDeliveryAddressViews();
    });
});

1. $.mobile.changePage('deliveryAddress.html') => 更改当前使用 jquery mobile 的页面

2. 当在 #card-delivery-address 上触发名为“pageshow”的事件时 (这意味着我的页面已插入到 DOM 中并成功 render) => 创建主干 View 并将 $el 绑定(bind)到 现有 DOM 并使用主干控制 DOM 事件 观点。

3. 为了在 View 之间传递数据和实例，我们使用 window.tempData全局变量，我们在其中放置上下文数据，以便新的 View 就会知道要做什么。

单向导航是成功的，假设我来自 view1 --> view2 (带有 tempData)，然后来自 view2 --> view 3 (覆盖相同的 tempData)。现在，这是我的问题:如果我们想从 View 3 --> View 2 返回，我们将需要用于初始化和渲染 View 2 的 tmpData 内容。当我们想返回 View 1 时，同样的事情。

注意:我没有使用主干路由器，但如果这能解决我的问题，我可以更改为使用它。

大家有什么想法吗？

Answer 1

好吧，让我们再试一次。我们将实现一个以页面路径为键的数据存储。

var pagesData = {};

// Let's assume we just switched to page '/my/page/1'

// Get a reference to the stored page data if it exists, 
// or create it empty and return it.
var currentPageData = pagesData[window.location.pathname] ||  
                     (pagesData[window.location.pathname] = {});

currentPageData.foo = 'bar';

console.log(pagesData['/my/page/1'].foo); // > "bar"

现在，您的所有页面都有一个“本地”数据存储，允许它们在整个导航过程中保存状态/数据。

注意:如果不使用pushState，则必须使用window.location.hash 代替window.location.pathname 作为PagesData 中的键。