Grid App 中的多个项目模板

Question

我正在开发基于 Grid 应用程序模板的 Windows Store 应用程序。创建新项目后，会为应用程序生成一些示例数据。应用中只有三个页面：主页、分组项目和项目详细信息。

我想知道是否可以为项目详细信息设置不同的模板，如果可以，如何实现。

例如，我有一个包含智能手机列表的组和另一个包含打印机列表的组。在智能手机项目详细信息模板中，我可能会有诸如“存储卡”、“扬声器”和“操作系统”之类的字段，而在打印机项目详细信息模板中，我将有诸如“速度”、“已接受”之类的字段墨盒”和“纸张尺寸”。

我应该如何添加项目详细信息模板并根据查看的项目使用正确的模板？我查看了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)然后在 HTML 中编写一个自定义模板选择函数。这并不难。如果您查看我的 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 演示可能会有所帮助。

如果您需要更多帮助，可以通过usdpe.ohours.org 与 Microsoft 开发人员宣传员安排一对一的时间。玩得开心！