Allowing Rapid Navigation with ListViews in Javascript Metro Style App
Exception was thrown but not handled in user code at line 20, column 13 in ms-appx://01c489fc-0e20-415d-ad4b-2895b4bc6e90/pages/groupedItems/groupedItems.js

0x800a138f - JavaScript runtime error: Unable to get property 'cloneNode' of undefined or null reference

If there is a handler for this exception, the program may be safely continued.

function multisizeItemTemplateRenderer(itemPromise)
    {
        return itemPromise.then(function (currentItem)
        {
            var content;

        // Grab the default item template used on the groupeditems page.
        content = document.getElementById('multiTemplate');

        /*************************
         This line is where it fails:
         *************************/
        var result = content.cloneNode(true);

        // Change the CSS class of the item depending on the group, then set the size in CSS.
        switch (currentItem.groupKey)
        {
            case "1":
                {
                    // Decides which item to resize based on items index
                    if (currentItem.index == 0 || currentItem.index == 1)
                    {
                        result.className = "largeitemtemplate"
                    }

                    else
                    {
                        result.className = "mediumitemtemplate"
                    }
                    break;
                }

            default:
                {
                    result.className = "smallitemtemplate"
                }
        }
        // Because we used a WinJS template, we need to strip off some attributes
        // for it to render.
        result.attributes.removeNamedItem("data-win-control");
        result.attributes.removeNamedItem("style");
        result.style.overflow = "hidden";

        /************************
         If this try catch isn't here, a RuntimeException occurs during quick navigation.
         ************************/
        try{
            result.getElementsByClassName("item-image")[0].src = currentItem.data.backgroundImage;
            result.getElementsByClassName("item-title")[0].textContent = currentItem.data.title;
        } catch (exception) {
            console.log(exception.name +  ": " + exception.message);
        }
        return result;
    });
}

initializeLayout: function (listView, listViewZoomOut, semanticZoom, viewState, itemTemplate)
        {

            if (viewState === appViewState.snapped)
            {
                listView.itemDataSource = Data.groups.dataSource;
                listView.groupDataSource = null;
                listView.layout = new WinJS.UI.ListLayout();
                listView.itemTemplate = multisizeItemTemplateRenderer;
                semanticZoom.zoomedOut = false;
                semanticZoom.forceLayout();
                semanticZoom.locked = true;
            }

            else
            {
                listView.itemDataSource = Data.items.dataSource;
                listView.groupDataSource = Data.groups.dataSource;


                listView.layout = new WinJS.UI.GridLayout({ groupHeaderPosition: "top" });


                listView.itemTemplate = multisizeItemTemplateRenderer;
                listView.layout = new WinJS.UI.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
                listViewZoomOut.itemDataSource = Data.groups.dataSource;
                listViewZoomOut.layout = new WinJS.UI.GridLayout({ maxRows: 1 });
                semanticZoom.forceLayout();
                semanticZoom.locked = false;
            }
        },