SemanticView error: Unable to get property 'zoomableView' of undefined or null reference


  • I am trying to add the SemanticView to the basic SplitView templates when showing the items, I have used what I think is the exact code from the SDK samples but I am still receiving the error "Unable to get property 'zoomableView' of undefined or null reference" here is my HTML body:

    <!-- Template for the group headers in the zoomed in ListView -->
        <div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="simpleHeaderItem">
                <h1 data-win-bind="innerText: title"></h1>
        <!-- Template for the items in the zoomed out ListView of the SemanticZoom -->
        <div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="semanticZoomItem">
                <h2 class="semanticZoomItem-Text" data-win-bind="innerText: title"></h2>
        <!-- Template for the items in the zoomed in ListView -->
        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="mediumListIconTextItem">
                <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
                <div class="mediumListIconTextItem-Detail">
                    <h4 data-win-bind="innerText: title"></h4>
                    <h6 data-win-bind="innerText: text"></h6>
        <!-- The content that will be loaded and displayed. -->
        <div class="groupeditemspage fragment">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">BeerTabsJS</span>
            <section aria-label="Main content" role="main">
                <!-- SemanticZoom using two ListViews -->
                <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">
                    <!-- The zoomed in ListView -->
                    <div id="zoomedInListView"
                        itemDataSource: groupedItems.dataSource, 
                        itemTemplate: mediumListIconTextTemplate, 
                        groupDataSource: groupedItems.groups.dataSource, 
                        groupHeaderTemplate: headerTemplate, 
                        selectionMode: 'none', 
                        tapBehavior: 'none', 
                        swipeBehavior: 'none' 
                    <!-- The zoomed out ListView -->
                    <div id="zoomedOutListView"
                        itemDataSource: groupedItems.groups.dataSource, 
                        itemTemplate: semanticZoomTemplate, 
                        selectionMode: 'none', 
                        tapBehavior: 'invoke', 
                        swipeBehavior: 'none' 

    And data.js:

        var list = new WinJS.Binding.List();
        var groupedItems = list.createGrouped(
            function groupKeySelector(item) { return item.key.toUpperCase().charAt(0); },
            function groupDataSelector(item) { return { title: item.key.toUpperCase().charAt(0) }},
            function compareGroups(left, right) {
                return left.toUpperCase().charCodeAt(0) - right.toUpperCase().charCodeAt(0);
        generateSampleData().forEach(function (item) {

    I feel like I am missing something very basic here in the HTML but I don't know what as the same code works in the SDK.

    • Edited by KrisPhillips Thursday, December 6, 2012 9:17 PM updated to reflect actual code
    Thursday, December 6, 2012 9:10 PM


  • I have found the issue with the code, the data was not exposed\scoped correctly. The example I had originally used the semanticzoom html from had the data setup globally, but in the sample I was trying to merge it with the data was exposed wrapped in a "Data" namespace, which I was not referencing correctly in the markup, I was trying reference the data as if it were global.
    • Marked as answer by KrisPhillips Friday, December 7, 2012 5:03 PM
    • Edited by KrisPhillips Friday, December 7, 2012 5:03 PM
    Friday, December 7, 2012 5:02 PM

All replies