Skip to content

Instantly share code, notes, and snippets.

@KevinTCoughlin
Last active December 14, 2015 22:19
Show Gist options
  • Save KevinTCoughlin/5157766 to your computer and use it in GitHub Desktop.
Save KevinTCoughlin/5157766 to your computer and use it in GitHub Desktop.
Found what I believe to be a mistake on the MSDN Windows 8 JavaScript ListView tutorial http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx DataArray item property should be "description" instead of "text" so that the template correctly uses the description property of each object. Otherwise the template returns undefined.
// Windows 8 MSDN ListView Tutorial ListItem Template
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div>
<!-- Displays the "picture" field. -->
<img data-win-bind="alt: title; src: picture" />
<div>
<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>
<!-- Displays the "text" field. -->
<h6 data-win-bind="innerText: description"></h6>
</div>
</div>
</div>
// ListView Controller
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
</div>
// JavaScript for ListView data source with corrected property of "text" to "description" to match template.
(function () {
"use strict";
var dataArray = [
{ title: "Basic banana", description: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", description: "Ice cream", picture: "images/60banana.png" },
{ title: "Brilliant banana", description: "Frozen custard", picture: "images/60banana.png" },
{ title: "Orange surprise", description: "Sherbet", picture: "images/60orange.png" },
{ title: "Original orange", description: "Sherbet", picture: "images/60orange.png" },
{ title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
{ title: "Very vanilla", description: "Frozen custard", picture: "images/60vanilla.png" },
{ title: "Marvelous mint", description: "Gelato", picture: "images/60mint.png" },
{ title: "Succulent strawberry", description: "Sorbet", picture: "images/60strawberry.png" }
];
var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible.
var publicMembers =
{
itemList: dataList
};
WinJS.Namespace.define("DataExample", publicMembers);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment