Question

所以我正在尝试使用WinJS.UI.Pivot控件创建一个应用。文档非常简单，我见过的样本是“傻瓜”。

我知道我可以在PivotItem控件下添加我的html，我也看到了一种方法，可以将data-win-control的子元素控制绑定到定义页面中的页面的ControlConstructor javascript文件，如下所示：

    (function () {
        "use strict";

        var ControlConstructor = WinJS.UI.Pages.define("/pages/hub/section1Page.html", {
            // This function is called after the page control contents 
            // have been loaded, controls have been activated, and 
            // the resulting elements have been parented to the DOM. 
            ready: function (element, options) {
                options = options || {};
            },
        });

        // The following lines expose this control constructor as a global. 
        // This lets you use the control as a declarative control inside the 
        // data-win-control attribute. 

        WinJS.Namespace.define("HubApps_SectionControls", {
            Section1Control: ControlConstructor
        });
    })();

有没有办法动态（以编程方式）执行此操作？

Answer 1

这是即将发布的新版codeShow的一些代码的高峰，它将在手机上运行。

//render pivot items for sections
var sectionsPivot = element.querySelector(".sections").winControl;
options.demo.data.sections.forEach(function (section) {
    var pivotItem = new WinJS.UI.PivotItem(document.createElement("div"), { isHeaderStatic: true, header: section.title });
    pivotItem.element.classList.add(options.demo.data.name);
    var pivotItemContent = pivotItem.element.querySelector(".win-pivot-item-content");
    WinJS.UI.Pages.render(Ocho.Utilities.format("/demos/{0}/{1}/{1}.html", options.demo.data.name, section.name), pivotItemContent)
        .then(function (page) {
            //remove the section header since the demo page has one already
            var header = page.element.querySelector("header.page-header");
            if (header) header.style.display = "none";
        });
    sectionsPivot.items.push(pivotItem);
});

WinJS.UI.PivotItem是在一个新的（内存中）div元素中创建的，一些内容被添加到pivot项的内容子元素中，然后我将它推入pivot控件的items集合中。希望有所帮助。

如何动态地将PivotItem绑定到html页面

1 个答案: