Semantic Zoom Error message

Question

I am trying to use semantic zoom and keep getting the error message:

JavaScript runtime error: Object doesn't support property or method 'itemFromDescription'

I don't know if it makes a difference but my listview uses render methods for the item template and doesn't use grouping...  Code looks like this:

            <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">
                <div class="homelistview" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: data.projects.dataSource, itemTemplate: renderProject, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }">
                </div>
                <div id="zoomedOutHomelistview" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: data.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }">
                </div>
            </div>

---

www.emadibrahim.com

Answer 1

never mind.  I was using 2 different data sources but apparently that doesn't work.  I refactored the code to be able to use the same data source for both listviews.

---

www.emadibrahim.com

Answer 2

This is odd, because I'm getting the same error when binding to the exact same thing:

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">  

  <div id="Category_All_Products_Items" data-win-control="WinJS.UI.ListView" data-win-options="{
    itemDataSource: categoryTiles.dataSource,
    itemTemplate: ItemBoxTemplate,
    selectionMode: 'none'
  }"></div>

  <div id="zoomedOutListView" data-win-control="WinJS.UI.ListView" data-win-options="{
          itemDataSource: categoryTiles.dataSource,
          itemTemplate: select('#semanticZoomTemplate')
  }"></div>
</div>

Answer 3

I remember hitting this myself, so just I went back and looked at my grouping functions I found this:

function groupKey(item) {
    return item.group.key + ""; // note: Making it a string because _positionItem in UI.js is dumb.
}

So yeah; I think they have a bug to fix. You can use that hack to cast the int into a string for a work-around. It does not seem to have any ill effects.