Windows phone 8.1 在WinJS'中重用页面；s轴

我正在使用WinJS为Windows Phone 8.1开发应用程序，并使用Visual Studio的pivot应用程序模板。“我的应用程序”查询外部API并在

数据透视项中显示结果。因为有三个非常相似的查询返回相同类型的数据，所以我想对
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
});

<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>

声明枢轴的我的页面如下所示：

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
});

<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函数，但不会显示任何内容（页面为空，只有数据透视项的标题可见）。但如果我滑动回第1部分，它包含我希望在第2部分中显示的数据

是否可以在不同的数据透视项中重用my
SectionPage.html
和
SectionPage.js
，最好不要使用太多的样板代码？
您需要创建自定义html控件来承载这些页面，自定义控件可以接受uri作为数据赢选项，然后在控件中可以使用updateLayout（）它将呈现页面并附加到parentElement


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

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

我找到了问题的根源。在页面
/pages/bookmarks/sectionPage.html
中，我有一个id用于保存我的ListVIew。我使用
document.getElementById（“listViewId”）.winControl获得ListVIew的win控制。这是错误的，因为当时我有三个id相同的div（每个部分都有），因此，
getElementById
总是返回相同的列表（第一节中的列表）

所以我把wincontrol的设置改为

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

其中
contentHost
取决于从主页收到的
data win选项，一切正常。
您尝试过使用模板吗？检查此链接我已经在使用
itemTemplate
，但我的问题出在其他地方。我想在整个页面上共享HTML和JavaScript，itemTemplate只是一个小问题HTML部分的艺术