javascript - 如何将PivotItems动态绑定(bind)到html页面

因此，我正在尝试使用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
        });
    })();

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

最佳答案

这是即将在手机上运行的即将发行的新版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元素中创建的，一些内容已添加到数据透视项目的content子项中，然后将其推入数据透视控件的items集合中。
希望能有所帮助。