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

    Question

  • 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>
            </div>
        </div>
    
        <!-- 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>
            </div>
        </div>
    
        <!-- 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>
                </div>
            </div>
        </div>
        -->
    
        <!-- 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>
                </h1>
            </header>
            <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"
                        class="win-selectionstylefilled"
                        data-win-control="WinJS.UI.ListView"
                        data-win-options="{ 
                        itemDataSource: groupedItems.dataSource, 
                        itemTemplate: mediumListIconTextTemplate, 
                        groupDataSource: groupedItems.groups.dataSource, 
                        groupHeaderTemplate: headerTemplate, 
                        selectionMode: 'none', 
                        tapBehavior: 'none', 
                        swipeBehavior: 'none' 
                    }">
                    </div>
    
                    <!-- The zoomed out ListView -->
                    <div id="zoomedOutListView"
                        data-win-control="WinJS.UI.ListView"
                        data-win-options="{ 
                        itemDataSource: groupedItems.groups.dataSource, 
                        itemTemplate: semanticZoomTemplate, 
                        selectionMode: 'none', 
                        tapBehavior: 'invoke', 
                        swipeBehavior: 'none' 
                    }">
                    </div>
    
                </div>
            </section>
    
        </div>


    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) {
            list.push(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

Answers

  • 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