Question

我正在使用single-page navigation model构建Metro应用。在我的一个页面上，我启动了一个获取某些信息的异步ajax请求。请求返回时，我想将收到的信息插入显示的页面。

例如：

WinJS.UI.Pages.define("/showstuff.html", {
    processed: function (element, options) {
        WinJS.xhr(...).done(function (result) {
            element.querySelector('#target').innerText = result.responseText;
        });
    }
};

但是我怎么知道用户在此期间还没有离开页面呢？尝试在不同的页面上插入文本没有意义，那么如何确保在请求开始时加载的页面仍处于活动状态？

Answer 1

您可以将页面URI与当前WinJS.Navigation.location进行比较，以检查您是否仍在页面上。您可以使用Windows.Foundation.Uri从页面URI中提取路径来执行此操作。

WinJS.UI.Pages.define("/showstuff.html", {
    processed: function (element, options) {
        var page = this;

        WinJS.xhr(...).done(function (result) {
            if (new Windows.Foundation.Uri(page.uri).path !== WinJS.Navigation.location)
                return;

            element.querySelector('#target').innerText = result.responseText;
        });
    }
};

Answer 2

我找不到正式的方法，所以我实施了一种解决方法。

WinJS.Navigation提供在导航时触发的事件。我使用navigating event构建了一个跟踪页面视图的简单类：

var PageViewManager = WinJS.Class.define(
    function () {
        this.current = 0;
        WinJS.Navigation.addEventListener('navigating',
                this._handleNavigating.bind(this));
    }, {
        _handleNavigating: function (eventInfo) {
            this.current++;
        }
    });

Application.pageViews = new PageViewManager();

每次用户开始新导航时，班级都会递增一个计数器。

使用该计数器，Ajax请求可以检查是否发生了任何导航并做出相应的反应：

WinJS.UI.Pages.define("/showstuff.html", {
    processed: function (element, options) {
        var pageview = Application.pageViews.current;

        WinJS.xhr(...).done(function (result) {
            if (Application.pageViews.current != pageview)
                return;

            element.querySelector('#target').innerText = result.responseText;
        });
    }
};

当异步回调返回时，我怎么知道我还在正确的页面上？

2 个答案: