網格應用程序中的多個項目模板

Question

我正在開發基於網格應用程序模板的Windows應用商店應用程序。創建新項目時，會爲應用程序生成一些示例數據。應用中只有三個頁面：主頁，分組項目和項目詳細信息。

我想知道是否有可能有不同的項目細節模板，如果是這樣，如何。

例如，我有一個包含智能手機列表的組和一個包含打印機列表的組。在智能手機項目詳細信息模板中，我可能會有諸如「存儲卡」，「揚聲器電話」和「操作系統」等字段，而在打印機項目詳細信息模板中，我會看到諸如「速度」，「已接受墨盒「和」紙張尺寸「。

我應該如何去添加項目詳細信息模板，並根據哪個項目被查看使用正確的模板？我看過http://babaandthepigman.wordpress.com/2012/02/08/datatemplateselector-winrt/，但這似乎只適用於XAML應用程序。我沒有使用XAML/VB/C++/C＃，而是使用JavaScript和HTML5。

Answer 1

要清楚網格項目模板中的三個頁面爲groupedItems（「集線器」），groupDetail（「部分」）和itemDetail（「細節」）。我其實希望他們能將這些頁面命名爲「hub」，「section」和「detail」。

如果您正在討論具有多個項目模板，以便輪轂（groupedItems）頁面上的項目切片根據項目類型而不同，那麼最簡單的方法是提供多個項目模板（WinJS.Binding.Template ），然後編寫一個自定義模板選擇功能。這並不困難。你可以看到一個例子，如果你看我的codeSHOW應用程序（codeshow.codeplex.com）...看到home.js頁面。源代碼在線，所以你可以看到該頁面here。

如果您正在討論具有多個詳細信息（itemDetail）頁面，以便當用戶從集線器上點擊某個項目時，它們可能會被帶到關於手機和打印機的整個頁面信息，那就是簡單地說就是擁有多個頁面並能夠智能地瀏覽您導航到的頁面。如果用戶點擊集線器中的電話，則可以導航到/pages/phone/phone.html。如果他們點擊打印機，然後導航到/pages/printer/printer.html。最後，如果您的實體（即電話和打印機）足夠相似，那麼您可能希望保留一個頁面來表示它們，並且使該頁面足夠聰明以修改其正確項目的模板。在這種情況下，您可以在頁面上創建兩個模板（再次使用WinJS.Binding.Template），並在實體被傳遞到頁面（ready(element,options)的「選項」部分）時，您只需檢查它並查看實體類型（即電話或打印機），然後將數據渲染到正確的模板中。 codeSHOW上的Binding and Templating和Fragments and Pages演示可能對此有所幫助。

如果您需要更多幫助，您可以與Microsoft Developer Evangelist一起安排一些其中的一對一活動，時間爲usdpe.ohours.org。玩的開心！