网格应用程序中的多个项目模板

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)页面上的项目磁贴根据项目类型的不同而不同，那么最简单的方法是在HTML中提供多个项目模板(WinJS.Binding.Template)，然后编写一个自定义模板选择函数。这并不难。如果你看我的codeSHOW应用程序(codeshow.codeplex.com)，你可以看到一个例子...请参阅home.js页面。源代码是在线的，所以您可以看到页面here。

如果您正在讨论拥有多个详细信息(itemDetail)页面，以便当用户从中心单击某个项目时，它们可能会被带到关于电话和打印机的整个页面，那么这只是一个具有多个页面的问题，并且能够智能地导航到哪个页面。如果用户单击集线器上的电话，则导航到/pages/ phone /hone.html。如果他们点击了一个打印机，那么你就导航到/pages/ printer /printer.html。

最后，如果您的实体(即手机和打印机)足够相似，那么您可能希望保留单个页面来表示它们，并使该页面足够智能，以便为正确的项目修改其模板。在这种情况下，您可以在页面上创建两个模板(再次WinJS.Binding.Template)，当实体被传递到页面(ready(element,options)的“选项”部分)时，您只需检查它并查看实体类型(即电话或打印机)，然后将数据呈现到正确的模板中。codeSHOW上的Binding and Templating和Fragments and Pages演示可能会对您有所帮助。

如果您需要更多帮助，您可以在usdpe.ohours.org上与微软开发人员布道者安排一些一对一的时间。玩得开心!