如何將PivotItems動態綁定到HTML頁面

因此，我正在嘗試使用WinJS.UI.Pivot控件創建應用程序。文檔非常簡單，我看到的樣本是「傻瓜」。如何將PivotItems動態綁定到HTML頁面

我知道我可以在PivotItem控制下加我的HTML和我也看到結合的子元素的控制的一種方式爭奪的data-win-control來定義JavaScript文件頁面的ControlConstructor，如下所示：

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

有沒有辦法做到這一點動態（以編程方式）？

來源

2014-06-04 sebagomez

你是在談論以編程方式將一個PivotItem添加到WinJS.UI.Pivot控件？ –

是的，這就是我問的，但我已經解決了我的原始問題...我會很高興地看到它 – sebagomez

這是來自即將發佈的新版本的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); 
});

正在一個新的（內存）div元素創建的WinJS.UI.PivotItem，一些內容被添加到樞軸項的內容孩子，然後我將其推入擺動控制的項目集合。希望有所幫助。

來源

2014-07-10 22:52:50

很酷的感謝，你只是提醒我去檢查代碼顯示代碼 – sebagomez

它現在是很大的流量。我昨晚檢查的東西很大，但還是有點混亂。一旦我穩定下來，我會發郵件給貢獻者。我們將在8月下旬再次舉辦一場MVA大型演出，所以我需要把它帶到一個好地方。 –

讓我知道，如果有什麼我可以幫助 – sebagomez

如何將PivotItems動態綁定到HTML頁面

回答

相關問題