在 WinJS 的 Pivot 中重用页面

Question

我正在使用 WinJS 为 Windows Phone 8.1 开发应用程序，我将 Visual Studio 的模板用于数据透视应用程序。我的应用程序查询外部 API 并在 PivotItem 中显示结果。由于有三个非常相似的查询返回相同类型的数据，我想为 Pivot 中的所有部分重复使用一个代码。 PivotItem 页面基本上只包含 ListView 以及从 API 收到的项目。我的版块页面 javascript 如下所示：

var ControlConstructor = WinJS.UI.Pages.define("/pages/bookmarks/sectionPage.html", {
    ready: function(element, options) {
    //Here I call API based on received option and render the page
    }
}

WinJS.Namespace.define("bookmarksApps_SectionControls", {
    SectionControl: ControlConstructor
});

我声明 Pivot 的页面如下所示：

<div class="bookmarks" data-win-control="WinJS.UI.Pivot" data-win-res="{ winControl: {'title': 'BookmarksTitle'} }">

    <div class="section1 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksNew'} }">
        <div class="sectioncontrol" id="section1contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'new'}"></div>
    </div>

    <div class="section2 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksAll'} }">
        <div class="sectioncontrol" id="section2contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'all'}"></div>
    </div>

    <div class="section3 section" data-win-control="WinJS.UI.PivotItem" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'BookmarksHistory'} }">
        <div class="sectioncontrol" id="section3contenthost" data-win-control="bookmarksApps_SectionControls.SectionControl" data-win-options="{'section': 'history'}"></div>
    </div>

</div>

现在，当我打开应用程序时，pivot 页面会正确加载并显示包含数据的第一部分。但是当我滑动不同的部分时，新数据被加载（因此调用了 ready 函数，但没有显示任何内容（页面是空白的，只有 PivotItems' headers 可见）。但是如果我滑动回到第 1 部分，它包含我想在第 2 节中显示的数据。

是否可以在不同的 PivotItems 中重用我的 SectionPage.html 和 SectionPage.js，最好不要使用太多样板代码？

Answer 1

您需要创建将托管这些页面的自定义 HTML 控件，自定义控件可以接受 uri 作为数据获胜选项，然后在您的控件中您可以拥有 updateLayout() 来呈现页面和附加到父元素。

更新布局方法中的示例代码：

            var options = {} //Page options
            if (!this._isLoaded) {
                this._isLoaded = true;
                WinJS.UI.Pages.render(this.uri, this._pageElement, options);
            }

Answer 2

我找到了问题的根源。在 /pages/bookmarks/sectionPage.html 页中，我 <div> 有一个 id 用于保存我的 ListVIew。我正在使用 document.getElementById("listViewId").winControl 获得 listview 的控制权。这是错误的，因为那时我有三个具有相同 id 的 div（每个用于每个部分），所以 getElementById 总是返回相同的列表（第一部分的那个）。

所以我将 wincontrol 的获取更改为

var discussionList = document.querySelector("#" + contentHost + " .disucssionsListView").winControl;

其中 contentHost 取决于从主页收到的 data-win-options 并且一切都按预期工作。

在 WinJS 的 Pivot 中重用页面

Reusing pages in WinJS's Pivot

winjs

windows-phone-8.1