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>

现在，当我打开应用程序时，枢轴页面正确加载并显示包含数据的第一部分。但是当我滑动不同的部分时，会加载新数据（因此调用就绪函数，但没有显示任何内容（页面为空白，只有PivotItems的标题可见）。但是，如果我向后滑动到section1，它包含数据，那么我想在第2节中显示。

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

Answer 1

您需要创建将托管这些页面的自定义HTML控件，自定义控件可以接受uri作为data-win-options，然后在您的控件中，您可以使用updateLayout（）来呈现页面并附加到parentElement。

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

            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中重用页面

2 个答案: