Windows 8 Metro Javascript - UI.js error?

Question

Hello All,

I currently am attempting to bind a ListView to a Simple Array. However, when I load the application, I do get this exception which causes my entire application to crash! I was wondering if anyone could help me with this!

Album.html has the following ListView control:

<section aria-label="Main content" role="main">
<div id="listPictures" data-win-control="WinJS.UI.ListView" data-win-options="{selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none', layout: { type: WinJS.UI.GridLayout }}">
</div>
</section>

And my Album.js would have the following code to do the binding to the ListView,

var pictures = new WinJS.Binding.List(["/content/image//1.jpg", "/content/image/5.jpg" ,"/content/image/3.jpg" , "/content/image/4.jpg" , "/content/image/9.jpg" , "/content/image/7.jpg"]);
var appBarDiv, appBar, lvPictures;

function loadAlbum() {

   var control = lvPictures.winControl;
   control.itemDataSource = pictures.dataSource;
        
control.itemTemplate = function (itemPromise) {
return itemPromise.then(function (item) {
var result = document.createElement("div");
result.className = "listPicture";

var image = document.createElement("img");
image.src = item.data;
image.alt = item.data;
result.appendChild(image);

return result;
});
};
}

WinJS.UI.Pages.define("/pages/album.html", {
   ready: function (element, options) {
       // This function is called whenever a user navigates to this page. It populates the page elements with the app's data.
       options = options || {};


            

       // Hook onto all links so that they use the navigation framework
       WinJS.Utilities.query("a").listen("click", function (eventInfo) {
           eventInfo.preventDefault();
           WinJS.Navigation.navigate(eventInfo.target.href);
       }, false);

       // Register Variables
       appBarDiv = document.getElementById("appbar");
       appBar = appBarDiv.winControl;
       lvPictures = document.getElementById("listPictures");

       // Hide unwanted appbar buttons
       appBar.hide();
       appBar.hideCommands(appBarDiv.querySelectorAll('.editSelect, .editSingleSelect'));
       appBar.sticky = false;

       // Program appbar buttons
       document.getElementById("cmdEdit").addEventListener("click", function (eventInfo) {
           var control = lvPictures.winControl;
           control.selectionMode = WinJS.UI.SelectionMode.single;
           control.tapBehavior = WinJS.UI.TapBehavior.toggleSelect;
           appBar.hideCommands(appBarDiv.querySelectorAll('.noneSelect'));
           appBar.showCommands(appBarDiv.querySelectorAll('.editSelect'));
           appBar.sticky = true;
           appBar.show();
       });

       document.getElementById("cmdSave").addEventListener("click", function (eventInfo) {
           var control = lvPictures.winControl;
           control.selectionMode = WinJS.UI.SelectionMode.none;
           control.tapBehavior = WinJS.UI.TapBehavior.none;
           control.selection.clear();

           appBar.showCommands(appBarDiv.querySelectorAll('.noneSelect'));
           appBar.hideCommands(appBarDiv.querySelectorAll('.editSelect, .editSingleSelect'));
           appBar.sticky = false;
           appBar.hide();
       });

       document.getElementById("cmdCancel").addEventListener("click", function (eventInfo) {
           var control = lvPictures.winControl;
           control.selectionMode = WinJS.UI.SelectionMode.none;
           control.tapBehavior = WinJS.UI.TapBehavior.none;
           control.selection.clear();

           appBar.showCommands(appBarDiv.querySelectorAll('.noneSelect'));
           appBar.hideCommands(appBarDiv.querySelectorAll('.editSelect, .editSingleSelect'));
           appBar.sticky = false;
           appBar.hide();
       });

       WinJS.UI.Animation.enterPage(document.getElementsByTagName("header")[0], { 0px", 9999px" }).done(function () {
           loadAlbum();
       });

        lvPictures.winControl.addEventListener("selectionchanged", function (eventInfo) {
        var count = lvPictures.winControl.selection.count();
        if (count > 0) {
        appBar.showCommands(appBarDiv.querySelectorAll('.editSingleSelect'));
        appBar.sticky = true;
        appBar.show();
        } else {
        appBar.hideCommands(appBarDiv.querySelectorAll('.editSingleSelect'));
        appBar.sticky = false;
        appBar.hide();
        }
        });
       },
   

updateLayout: function (element, viewState) {
// TODO: Respond to changes in viewState.
}
});

When the application runs, I face this exception and since it appeared in ui.js; I am unable to debug the source of this issue:

Thank you in advance for your advice and time taken to look into this issue!

Answer 1

Hello.

it's a little hard to see what's going on here. It looks like something is not quite right with the data source or the list view. You should start by removing most things and then start adding them back one by one. FOr instance, start with the listview and the data source (comment the template) and then see if you get anything back from the data source. if that works, then start adding more things to the page.

---

Luis Abreu

Answer 2

Hi,

Seems like there's an issue with the listview binding / item template. I had a similar issue a few weeks ago and it was because I was biding the incorrect dataSource to the listview control.
For what it's worth try creating a List from an array of objects. Add the data property and set your image path to it. 

Also, try adding a breakpoint to check at which point the application fails.

Diego.